在画布上用图像背景擦除线条

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

当我尝试使用白色我在图像上得到白线。我想过做透明线，但我不认为这是可能的。

关于保存画布与toDataURL()我想保存具有背景的绘图。

我这是怎么设置背景图片：

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

来源

2016-03-14 user2587454

可以“擦除”与合成，但它不建议行

可以使用合成“抹掉”先前绘制通过使用globalCompositeOperation='destination-out'重绘它。这会导致上一行变成透明像素。然后，您可以使用globalCompositeOperation='destination-over'将透明像素重新应用于背景图像。

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

擦除绘制在一个背景画布线的更好（更典型的）的方法是重绘一切：

保存阵列中的所有行定义（例如线[]），
要除去线（S），从线[]数组中删除它们的定义，
擦除整个画布，
重绘背景，
重绘所有行仍在行[]数组。

这里的注释代码和演示：

// 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>

来源

2016-03-14 17:03:48 markE

在画布上用图像背景擦除线条

回答

相关问题