在畫布上用圖像背景擦除線條

我正在尋找一種方法來擦除畫布中的畫線而不擦除背景圖像。在畫布上用圖像背景擦除線條

當我嘗試使用白色我在圖像上得到白線。我想過做透明線，但我不認爲這是可能的。

關於保存畫布與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

在畫布上用圖像背景擦除線條

回答

相關問題