html5画布单元

我一直在玩html5画布，不明白单元是如何工作的。我在MDN上看到，画布上的一个“单位”应该是1个像素。所以我画了一幅宽800px×高400px的画布。然后，我在坐标400,200处画了一个矩形，我想这会使左上角死点。但是，它远离了屏幕。当我将其缩回到大约200,100左右时，我可以看到矩形，但从逻辑上讲，它并没有任何意义。html5画布单元

长话短说。画布中的坐标系如何工作？

来源

2011-05-22 Akinos

你是用CSS还是用HTML'width'和'height'属性设置宽度和高度？ – icktoofay 2011-05-22 00:36:16

请发布代码，并可能做一个http://jsfiddle.net。 – 2011-05-22 00:38:18

请注意，如果画布逻辑尺寸设置为与显示尺寸相同，并且您尚未对上下文执行任何缩放，则1个画布单位为1像素;但是一般情况下，画布可能会将位图中的像素大小栅格化为其他大小，然后浏览器可能会选择以其他大小绘制该位图。 – Phrogz 2011-05-22 13:02:47

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

http://jsfiddle.net/hvyvY/

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

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

不是的CSS样式元件。改变画布的CSS样式会改变它的尺寸。

来源

2011-05-22 00:53:51

谢谢！因此，当你习惯使用CSS来控制宽度和高度时，可以直观地反映出来。花费我几个小时，但你为我分类。 – 2015-06-25 13:40:29

html5画布单元

回答

相关问题