Question

我正在寻找一种方法来擦除画布上的绘画线而不删除我的背景图像。

当我尝试使用白色时，我会在图像上看到白线。我想过制作透明线，但我认为不可能。

使用toDataURL()保存画布时我想用背景保存图形。

这就是我设置背景图片的方式：

var background = new Image();
background.src = "pizza.png";
background.onload = function(){
   context.drawImage(background,0,0);
}

Answer 1

您可以使用合成“擦除”，但不建议使用合作

您可以使用合成来“擦除”之前绘制的线条，方法是使用globalCompositeOperation='destination-out'重绘它。这会导致前一行变为透明像素。然后，您可以使用globalCompositeOperation='destination-over'将透明像素重新应用背景图像。

但线条存在问题。 “擦除”行的问题是画布会自动对每一行应用消除锯齿。添加抗锯齿很难消除。

在背景上绘制画布线的更好（更典型）的方法是重绘所有内容：

将所有行定义保存在数组中（例如lines []），
要删除行，请从行[]数组
删除整个画布，
重绘背景，
重新绘制行[]数组中的所有行。

这是带注释的代码和演示：

// canvas vars
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// save line definitions
var lines=[
  {x0:75,y0:50,x1:200,y1:100,color:'red'},
  {x0:75,y0:75,x1:200,y1:100,color:'green'},
  {x0:75,y0:100,x1:200,y1:100,color:'blue'},
  {x0:65,y0:50,x1:65,y1:200,color:'green'},
]

  // load the background
  var img=new Image();
  img.onload=start;
  img.src="https://dl.dropboxusercontent.com/u/139992952/multple/bk.png";
  function start(){
  // draw the first time
  draw();
  // remove green lines on button click
  $('#go').click(function(){ remove('green'); });
  }

  function draw(){

  // clear canvas
  ctx.clearRect(0,0,cw,ch);

  // redraw background
  ctx.drawImage(img,0,0);

  // redraw all lines still in lines[]
  ctx.lineWidth=3;
  for(var i=0;i<lines.length;i++){
  var l=lines[i];
ctx.beginPath();
ctx.moveTo(l.x0,l.y0);
ctx.lineTo(l.x1,l.y1);
ctx.strokeStyle=l.color;
ctx.stroke();
}
}

function remove(color){
  for(var i=lines.length-1;i>=0;i--){
    if(lines[i].color==color){lines.splice(i,1);}
  }
  draw();
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=go>Remove green lines</button>
<br>
<canvas id="canvas" width=300 height=300></canvas>

在画布上擦除线与图像背景

1 个答案: