javascript - 重绘相同的 Canvas 线条不准确

Question

我有一个简单的 Canvas 元素:

<canvas id="floor" style="background-color:#f7f7f7;border:1px #000 solid;"    >
</canvas>

我还有一个创建垂直/水平线的draw函数:

function draw(){

  ctx.translate(0.25, 0.25);
  for (var x = size; x < canvas.width; x += size)  { //vertical
      ctx.moveTo(x, 0);
      ctx.lineTo(x, canvas.height);
  }

  for (var y = size; y < canvas.height; y += size) { //horizontal
     ctx.moveTo(0, y);
     ctx.lineTo(canvas.width, y);
  }

  ctx.strokeStyle = "#C1C1C1";
  ctx.stroke();
}

结果:

按钮再次调用此draw 函数:

$(".b").on('click',function (){
  draw();
})

但是如果我多次点击这个按钮，它似乎会添加更多的线条使其看起来更粗:

问题

如果我绘制完全相同的线条，为什么 Canvas 看起来不一样？

如何修改我的代码以使其看起来一样？

JSBIN

Answer 1

在每次调用 draw 时，您需要开始一条新路径:
ctx.beginPath();