为什么调用笔画会导致在HTML画布上绘制此元素？

Question

我正在一堆填充的蓝色圆圈上绘制一个白色矩形。这是填充圆圈的代码：

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来更仔细地查看问题。

JSBIN

Answer 1

您绘制的最后一个圆仍保留在画布上下文中，并且在调用ctx.stroke()时将被重画。要清除它，您需要在绘制矩形之前添加ctx.beginPath()。

或者，您可以改用ctx.strokeRect()，而跳过ctx.stroke()。

更新的小提琴：https://jsfiddle.net/r7bcmLpq/4/