畫布 - 刪除drawimages

在我的畫布上添加2張圖片。 1張圖片是「背景畫布」。 2圖像從1圖像剪切並添加到背景。畫布 - 刪除drawimages

添加背景（1個圖像）：

img.onload = function() { 
    img2= new Image(); 
    img2.src=e.target.result; 
    canvas.width = this.width; 
    canvas.height = this.height; 
    context.drawImage(img2,0,0);        
}

添加2張圖片：

var c=document.getElementById('obrazek'); 
var ctx = c.getContext("2d"); 
var img1 = new Image(); 
img1.src =$('#blur').getCanvasImage(); 
img1.onload = function(){ 
    ctx.translate(xStart,yStart); 
    ctx.beginPath(); 
    context.arc(0, 0, d, 0, 2 * Math.PI, false); 
    ctx.clip(); 
    ctx.drawImage(img1,-xStart,-yStart); 
}

我需要乾淨的背景。我想刪除2圖像並再次加載背景。

我的乾淨：

context.drawImage(img2,0,0);

清洗背景後，我看到：

enter image description here

2圖像是不對的去掉，爲什麼？

來源

2014-02-17 viko

你需要清除裁剪區域或者一直還提請將被限制你的圈子。

保存正常曝光背景下
做你的削波繪製
背景下恢復到正常曝光狀態

像這樣：

function drawAll(backgroundImage,topImage,xStart,yStart,d){ 

     // clear the whole canvas of all images 

     ctx.clearRect(0,0,c.width,c.height); 

     // save the unclipped context 

     ctx.save() 

     // draw the background image (not clipped) 

     ctx.drawImage(backgroundImage,0,0); 

     // create a clipping circle 

     ctx.arc(xStart,yStart,d,0,Math.PI*2); 
     ctx.clip(); 

     // draw the top image restricted to the clipping circle 

     ctx.drawImage(topImage,xStart-topImage.width/2,yStart-topImage.height/2); 

     // restore the context (clears the clipping circle) 

     ctx.restore(); 
}

來源

2014-02-17 15:27:32 markE

的問題是，你需要清除你的背景，你重繪之前

請參閱相關的問題：

How to clear the canvas for redrawing

來源

2014-02-17 14:36:50 BillyBigPotatoes

我測試了它。不起作用。在我看來，只刪除了背景和1/4圈。 – viko

您是否嘗試獲取新的上下文 var ctx = c.getContext（「2d」）; – BillyBigPotatoes

是的。看截圖。清潔只有1/4圈（在右下角），接下來是剪切1圖像...當我這樣做：ctx.clearRect，它沒有幫助。我想刪除圈子並再次加載背景。 – viko

這工作太：

ctx.clearRect(0,0, c.width, c.height); 
var w = c.width; 
c.width = 1; 
c.width = w; 
context.clearRect (0 , 0 , canvas.width , canvas.height); 
context.drawImage(img2,0,0);

來源

2014-02-17 16:00:50 viko

畫布 - 刪除drawimages

回答

相關問題