用图像背景擦除画布中的线条答案

【问题标题】：erase line in canvas with image background用图像背景擦除画布中的线条
【发布时间】：2016-03-15 01:11:05
【问题描述】：

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

当我尝试使用白色时，图像上出现白线。我想过制作透明线，但我认为这是不可能的。

关于用toDataURL() 保存画布我想用背景保存绘图。

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

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

【问题讨论】：

标签： html5-canvas

【解决方案1】：

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

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

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

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

将所有线定义保存在一个数组中（例如lines[]），
要删除行，请从 lines[] 数组中删除它们的定义，
擦除整个画布，
重绘背景，
重绘仍在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>

【讨论】：