HTML Canvas剪辑和putImageData

Question

我有一个画布，背景中有一个大图像，前面有一个较小的圆形图像。我实现了这一轮的图像效果，通过使用夹子，像这样

ctx.save(); 

ctx.beginPath(); 
ctx.arc(x,y,r,0,Math.PI*2, true); 
ctx.closePath(); 
ctx.clip(); 

ctx.drawImage(img,x-r,y-r,2*r,2*r);  // draw the image 
ctx.restore(); 

然后我要旋转的圆形图像，所以我使用的第二上下文，旋转和重绘像这样

backCanvas=document.createElement('canvas');  
backContext=backCanvas.getContext('2d'); 
backCanvas.width=w; 
backCanvas.height=h; 

backContext.translate(w/2,h/2); 
backContext.rotate(a); 

backContext.drawImage(img,-w/2,-h/2,w,h); 

var imgData=backContext.getImageData(0,0,w,h); 

ctx.save(); 

ctx.beginPath(); 
ctx.arc(x,y,r,0,Math.PI*2, true); 
ctx.closePath(); 
ctx.clip(); 
ctx.putImageData(imgData,x,y); 

ctx.restore(); 

但是，什么情况是从背面画布复制黑色透明背景并且剪辑无法“剪辑”它。

任何帮助，将理解

Answer 1

按照specs，

电流路径，变换矩阵，阴影属性，全局α，剪辑区域，和全球复合算不得影响getImageData（）和putImageData（）方法。

就你而言，你为什么要使用额外的画布和像素数据操作？为什么不只是

ctx.save(); 

ctx.beginPath(); 
ctx.arc(x, y, r, 0, Math.PI*2, true); 
ctx.closePath(); 
ctx.clip(); 

ctx.translate(x, y); 
ctx.drawImage(img, -r, -r, 2*r, 2*r); 
// not restoring context here, saving the clipping region and translation matrix 

// ... here goes the second part, wherever it is: 
ctx.save(); 
ctx.rotate(a); 
ctx.drawImage(img, -r, -r, 2*r, 2*r); 
ctx.restore();