javascript - HTML5 Canvas : Why are these squares not the same size?

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();

两个方 block 之间的唯一区别(我可以看到)是颜色代码以及 x、y、w< 的起始位置 和 h 参数。但是，在这两种情况下，w 和 h 参数都比 x 和 y< 参数多 15/ 参数。那么，除了放置在不同的地方之外，它们的尺寸应该相同(15 x 15)，对吗？

不:P

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

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

有什么建议吗？

Answer 1

我认为您认为 ctx.rect 的参数是 x1, y1, x2, y2；但是，事实上，正如您所说:x, y, w, h。

因此:15x15 != 75x29