Question

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

示例代码：

// 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.

如果您注释掉绘制白色背景矩形的2条线，它可以正常工作。我做错了什么？

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();

完成： - ）

Answer 2

Fillstyle是白色的。绘图是白色的。可能会解释一下。

打破我的画布的白色背景

2 个答案: