Html5 canvas 用图像背景擦除画布中的线条

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

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

使用

toDataURL（）

保存画布时，我希望使用背景保存图形

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

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

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

通过使用

globalCompositeOperation='destination-out'

重新绘制先前绘制的线，可以使用合成来“擦除”该线。这会使前一行变为透明像素。然后，您可以使用

globalCompositeOperation='destination-over'

在透明像素上重新应用背景图像

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

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

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

这里是注释代码和演示：

//画布变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
//保存行定义
变量线=[
{x0:75，y0:50，x1:200，y1:100，颜色：'red'}，
{x0:75，y0:75，x1:200，y1:100，颜色：'green'}，
{x0:75，y0:100，x1:200，y1:100，颜色：'blue'}，
{x0:65，y0:50，x1:65，y1:200，颜色：'green'}，
]
//加载背景
var img=新图像（）；
img.onload=启动；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/bk.png";
函数start（）{
//第一次画
draw（）；
//删除按钮上的绿线单击
$（'go'）。单击（函数（）{remove（'green'）；}）；
}
函数绘图（）{
//透明帆布
ctx.clearRect（0,0，cw，ch）；
//重画背景
ctx.drawImage（img，0,0）；
//重新绘制仍在行[]中的所有行
ctx.线宽=3；
对于（变量i=0；i=0；i--）{
if（lines[i].color==color）{lines.splice（i，1）；}
}
draw（）；
}

body{背景色：象牙；}
#画布{边框：1px纯红；边距：0自动；}

删除绿线