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

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参数都比x和y参数多15 。 因此，除了放置在不同的位置外，它们的大小应该相同（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）;