我有一个画布,背景中有一个大图像,前面有一个较小的圆形图像。我通过像这样使用剪辑实现了这种圆形图像效果
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();
但发生的情况是黑色透明背景从背面画布复制而来,剪辑无法“剪辑”它。
任何帮助,将不胜感激