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();