html - 为什么我的 HTML5 矩形看起来放大了？

Question

正在关注 http://www.html5canvastutorials.com/tutorials/html5-canvas-rectangles/ ，我在 Canvas 上并排绘制了一些矩形。问题是它们看起来放大了很多；在 1.0 的缩放比例下，它们看起来大约是原始大小的五倍；它们在 0.16 左右的缩放比例下显示正确大小(如果边界模糊)。

我希望我可以通过使 Canvas 的像素尺寸更大并缩小来获得解决方法，但是在 Canvas 上获得 1:1 缩放比例的正确方法是什么？ Canvas 的宽度和高度设置为 100%，正文的边距为 0。手动将 Canvas 的宽度和高度设置为窗口的高度和宽度不会改变此行为。

TIA，

Answer 1

问题是，您为 Canvas 设置了样式 的宽度和高度。您需要设置宽度和高度属性，而不是 css 样式。所以像这样:

<canvas id='mycanvas' width='800' height='600'></canvas>

类似问题的更多信息:Canvas is stretched when using CSS but normal with "width" / "height" properties