为什么调用 stroke 导致此元素绘制在 HTML canvas 上？

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

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

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

已更新 fiddle：https://jsfiddle.net/r7bcmLpq/4/

为什么调用 stroke 导致此元素绘制在 HTML canvas 上？

Why does calling stroke result in this element being drawn on HTML canvas?

html

javascript

canvas

fill

stroke