开发者

HTML5 Canvas compositing (source-in)

开发者 https://www.devze.com 2022-12-21 02:26 出处：网络

I am trying to recreate a page flipping type animation in HTML5 using canvas. The animation i开发者_如何学JAVAs based on ideas from this page. But that\'s not really important. The problem I am having

相关专题：canvas composite

I am trying to recreate a page flipping type animation in HTML5 using canvas. The animation i开发者_如何学JAVAs 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.

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.