如何通过在其上绘制另一条线来删除线条

Question

我需要通过在其上放置另一条线来删除之前绘制的线。新行应与背景颜色相同。

我试过了： http://jsfiddle.net/wgenf10x/

<canvas id="canvas" style="background-color: black;">

使用Javascript：

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");    
var screenW = canvas.width;
var screenH = canvas.height;
setColor("#ffffff");
draw();

      function setColor(colorHexStr){
        ctx.strokeStyle = colorHexStr;
      }


      function line(x1,y1,x2,y2){
        ctx.moveTo(x1,y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
      }

      function draw(){
        setColor("white");
        line(0,0,screenW, screenH);
        setColor("black");
        line(0,0,screenW, screenH);
      }

但白线并未完全删除。出了什么问题？

P.S。请不要建议清除整个画布。我不需要它。

Answer 1

您正在看到由canvas的自动消除锯齿创建的工件。

只需增加“擦除”lineWidth（ctx.lineWidth+=1;）以覆盖该抗锯齿。