画布元素切断了

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边框，你必须在调整尺寸/定位时考虑它们。

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