为什么调用笔划会导致在HTML画布上绘制此元素？
为什么调用笔划会导致在HTML画布上绘制此元素？
提问于 2018-07-30 03:29:34
我在一堆蓝色圆圈上画了一个白色的矩形。这是用于填充圆圈的代码：
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更详细地查看问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-30 03:36:12
您绘制的最后一个圆仍然保存在画布上下文中，当您调用ctx.stroke()时，它将被重新绘制。要清除它，您需要在绘制矩形之前添加一个ctx.beginPath()。
或者，您可以使用ctx.strokeRect()代替，并跳过ctx.stroke()。
更新的fiddle：https://jsfiddle.net/r7bcmLpq/4/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51583842
复制相关文章
相似问题