HTML Canvas 剪辑和 putImageData

发布于 2024-10-21 08:45:08 字数 805 浏览 4 评论 0原文

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

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

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

任何帮助将不胜感激

原文

I have a canvas with a large image in the background and a smaller round image in front of it. I achieved this round image effect by using clip like so

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

then I want to rotate the round image, so I use a second context and rotate and redraw like so

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

But what happens is that the black-transparent background gets copied from the back canvas and the clip fails to "clip" it.

Any help would be appreciated

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆伤 2024-10-28 08:45:08

根据

当前路径、变换矩阵、阴影属性、全局 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();

According to the specs,

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

In your case, why are you using an additional canvas and pixel data manipulations? Why not just

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

回复收藏 0 原文

~没有更多了~