javascript - 画布元素在

Question

当我在画布上以 0,0 坐标放置一个正方形时，左上角被切断：

var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
context.strokeStyle = 'blue';
context.rect(0, 0, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

<canvas id="c" width="500" height="500"></canvas>

为什么是这样？

Answer 1

这是因为一半的笔划在 rect.fill之内，而另一半笔划在 rect.fill 之外。

有点像 css 边框，在调整大小/定位时必须考虑它们。

在画布的情况下，笔画始终是对象的一半进/一半出。