HTML5画布单位

Question

我一直在使用HTML5画布，但不理解像素单位的工作方式。我在MDN上看到，画布上的一个“单位”应该是1像素。因此，我画了一个800像素宽x 400像素高的画布。然后，在坐标400,200处绘制了一个矩形，我认为这会将左上角放在中心位置。然而，它被放在了屏幕远离的地方。当我将其缩小到大约200，100左右时，我可以看到矩形，但它的最终位置并没有按预期逻辑实现。

简而言之，画布中的坐标系统是如何工作的？

- user415715

---

你是用CSS还是HTML的width和height属性来设置宽度和高度的？ - icktoofay

请发布代码，并可能在 http://jsfiddle.net 上进行演示。 - Jared Farrish

请注意，如果画布的逻辑尺寸设置为与显示尺寸相同，并且您没有在上下文中执行任何缩放，则1个画布单位等于1个像素；然而，一般情况下，画布可能会将您的“像素”大小栅格化为其位图中的其他大小，然后浏览器可能会选择以其他大小绘制该位图。 - Phrogz

Answer 1

应该是正确的。这里有一个例子：

http://jsfiddle.net/hvyvY/

请注意，您必须使用HTMLCanvasElement的宽度和高度属性设置其大小，例如：

<canvas id="canvas1" width="800" height="400">

而不是改变Canvas元素的CSS样式。更改Canvas的CSS样式会缩放它。

- Simon Sarris

---

谢谢！当你习惯使用 CSS 控制宽度和高度时，这会让人感到很不直观。这花费了我数小时的时间，但你为我解决了这个问题。 - Alan Macdonald