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，

当前路径、变换矩阵、阴影属性、全局 alpha、剪切区域和全局合成运算符不得影响 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();