我在一堆蓝色圆圈上画了一个白色的矩形。这是用于填充圆圈的代码:
function fillCircle(color, radius, x, y){
console.log("New Circle With Color: " + color + " Radius: " + radius + "X: " + x + "Y: " + y);
ctx.save();
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
}
下面是调用上述函数的代码:
var draw = function(){
//draws map with ships
for(var k = 1; k < 6; k++){
for(var i = 0; i < 24; i++){
var point = polarToReal(k, i * Math.PI / 12);
fillCircle("blue", 4, point[0], point[1]);
}
}
}
最后,下面是绘制矩形的代码:
function winMessage(color, text){
ctx.fillStyle = "white";
ctx.fillRect(WIDTH/4, HEIGHT/4, WIDTH/2, HEIGHT/2)
ctx.font = WIDTH/20+"px Arial";
ctx.strokeStyle = "black";
ctx.rect(WIDTH/4, HEIGHT/4, WIDTH/2, HEIGHT/2);
ctx.stroke();
ctx.fillStyle = color;
ctx.textAlign = "center";
ctx.fillText(text, WIDTH/2, HEIGHT/2);
}
当我第一次调用draw()
,然后调用winMessage()
时,白色矩形显示了其中一个圆的轮廓(见下图)。我不确定为什么笔画队列没有被清除。请使用我提供的jsbin更详细地查看问题。
发布于 2018-07-30 03:36:12
您绘制的最后一个圆仍然保存在画布上下文中,当您调用ctx.stroke()
时,它将被重新绘制。要清除它,您需要在绘制矩形之前添加一个ctx.beginPath()
。
或者,您可以使用ctx.strokeRect()
代替,并跳过ctx.stroke()
。
更新的fiddle:https://jsfiddle.net/r7bcmLpq/4/
https://stackoverflow.com/questions/51583842
复制相似问题