HTML5 Canvas 合成(来源)

发布于 2024-08-23 04:14:55 字数 344 浏览 5 评论 0原文

我正在尝试使用画布在 HTML5 中重新创建页面翻转类型动画。该动画基于此页面的想法。但这并不重要。我遇到的问题是,使用“源输入”复合操作并没有给我预期的结果,并且希望澄清原因。我认为它只适用于 chrome,不适用于 FF 3.6。

黑色矩形应该充当翻页的“掩模”。我只想看到与遮罩重叠的区域翻页。问题是绘制了整个黑色矩形,而不仅仅是它们重叠的区域。

我知道 HTML5 还没有真正被使用,我只是为了我的个人网站和好奇心而进行试验。任何想法将不胜感激。

I am trying to recreate a page flipping type animation in HTML5 using canvas. The animation is based on ideas from this page. But that's not really important. The problem I am having is that using the 'source-in' composite operation is not giving me the results I expect and would like clarification as to why. I think it only works on chrome, not working on FF 3.6.

The black rectangle is supposed to act as a 'mask' for the page being turned over. All I want to see is the turning page in the areas where it overlaps the mask. The problem is the entire black rectangle is drawn, not just the area where they overlap.

I know HTML5 isn't really being used yet, I'm just experimenting for my personal site and curiosity. Any ideas would be greatly appreciated.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

牛↙奶布丁 2024-08-30 04:14:55

Canvas 合成支持已损坏,并且在某些浏览器中可能仍然不完整。

在此处比较图像
使用浏览器中的实际渲染来查看哪些浏览器适用现在。

Canvas Compositing support was broken and might still be incomplete in some browsers.

Compare the images here
with the actual rendering in your browser to see what works in which browser right now.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文