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）;