javascript - 白色背景打破了我的 Canvas

Question

我正在尝试在 Canvas 上绘制几个形状，但遇到了一个奇怪的问题。当我尝试在绘制形状之前在 Canvas 上绘制白色矩形时，该形状永远不会显示。我做错了什么？

示例代码:

// drawing a white background
// This breaks it. If I comment thiese two line out, it works.
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, Canvas.width, Canvas.height);

// Draw the rectangle
ctx.lineWidth = LineWidth;
ctx.strokeStyle = Color;
ctx.beginPath();
var startPos = Ordinates[0];
ctx.moveTo(startPos.start.x, startPos.start.y);
ctx.lineTo(startPos.stop.x, startPos.stop.y);
for(var i = 0; i < Ordinates.length; i++){
  if(i === 0) continue;
  ctx.lineTo(Ordinates[i].stop.x, Ordinates[i].stop.y);
}
ctx.closePath();
ctx.fill();

And here's a fiddle.

如果你注释掉绘制白色背景矩形的两行，它就可以正常工作。我做错了什么？

Answer 1

ctx.fillStyle = "#FFFFFF"; // <-- set the fill color to white
ctx.fillRect(0, 0, Canvas.width, Canvas.height);

// Draw the rectangle
ctx.lineWidth = LineWidth;
ctx.strokeStyle = Color;
ctx.beginPath();
var startPos = Ordinates[0];
ctx.moveTo(startPos.start.x, startPos.start.y);
ctx.lineTo(startPos.stop.x, startPos.stop.y);
for(var i = 0; i < Ordinates.length; i++){
    if(i === 0) continue;
    ctx.lineTo(Ordinates[i].stop.x, Ordinates[i].stop.y);
}
ctx.closePath();
ctx.fill(); // <--- filling with white, while the background is still. you can remove this line btw
ctx.fillStyle = '#000000'; // <-- now we set it to black
ctx.fill(); // <--- filling with black now

此外，如果您想查看路径的轮廓:

ctx.stroke();

这会以正确的颜色绘制它的轮廓。

但在对 v.rouge 的回复中，您只是说您希望它是白色的，带有黑色轮廓:

ctx.fillStyle = '#ffffff';
ctx.strokeStyle = '#000000';
ctx.fill();
ctx.stroke();

完成:-)