Question

最近，我正在玩HTML5 Canvas，我遇到了这里看到的问题 - https://jsfiddle.net/6buwndz6/。

以下是代码：

ctx.fillStyle = "#e74c3c";
ctx.beginPath();
ctx.rect(0,0,15,15);
ctx.fill();
ctx.closePath();

ctx.fillStyle = "#e67e22";
ctx.beginPath();
ctx.rect(60,14,75,29);
ctx.fill();
ctx.closePath();

两个方块（我能看到）之间的唯一区别是颜色代码，以及x，y，w和h的起始位置参数。但是，在这两种情况下，w和h参数比15和x参数多y。因此，除了位于不同的地方，它们应该是相同的尺寸（15 x 15），对吗？

不：P

橙色方块明显大于红色方块，我看不出为什么的任何真正原因。只是为了澄清，红色方块是预期的大小。

我在Mac OS X Yosemite上使用Chrome 49。

有什么建议吗？

Answer 1

我认为您认为ctx.rect的论据是x1, y1, x2, y2;但事实上，正如你所说：x, y, w, h。

因此：15x15 != 75x29

Answer 2

W表示宽度，H表示高度。因此，两种情况都应该是15

ctx.rect（0,0， 15 ， 15 ）;

ctx.rect（60,14， 15 ， 15 ）;

HTML5 Canvas：为什么这些方块的大小不一样？

2 个答案: