画布 - 删除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

回答

相关问题