javascript - Canvas 元素在

Question

当我在 Canvas 上的 0,0 坐标处放置一个正方形时，左上角被 chop :

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 边框，您必须在调整大小时/定位时考虑到它们。

在 canvas 的情况下，笔触总是半入/半出对象。