2010-02-25 11 views
8

Ich versuche, eine Seite spiegeln Typ Animation in HTML5 mit Canvas erstellen. Die Animation basiert auf Ideen von this page. Aber das ist nicht wirklich wichtig. Das Problem, das ich habe, ist, dass die Verwendung der 'Source-in'-Composite-Operation mir nicht die Ergebnisse liefert, die ich erwarte, und würde gerne erklären, warum. Ich denke, es funktioniert nur auf Chrom, funktioniert nicht auf FF 3.6.HTML5 Canvas-Compositing (Quelle-in)

Das schwarze Rechteck soll als Maske für die umzublätternde Seite dienen. Alles, was ich sehen möchte, ist das Umblättern in den Bereichen, in denen es die Maske überlappt. Das Problem ist, dass das gesamte schwarze Rechteck gezeichnet wird, nicht nur der Bereich, in dem sie sich überlappen.

Ich weiß, HTML5 wird noch nicht wirklich benutzt, ich experimentiere nur für meine persönliche Seite und Neugier. Irgendwelche Ideen würden sehr geschätzt werden.

+2

HTML5, obwohl noch experimentell, wird bereits verwendet und die Browser-Unterstützung ist auch nicht so schlecht. – Tronic

+1

Der Beispielcode ist ein fehlerhafter Link. Sie fragen sich, ob dies geschlossen werden sollte, da es zu spezifisch erscheint und das zu betrachtende Beispiel nicht mehr existiert. Sie fragen sich, ob es eine Antwort "aufgegebenes Projekt" geben muss. – artlung

Antwort

5

Canvas Compositing-Unterstützung wurde unterbrochen und ist in einigen Browsern möglicherweise noch unvollständig.

Vergleichen Sie die images here mit the actual rendering in Ihrem Browser, um zu sehen, was in welchem ​​Browser gerade funktioniert.

+0

Es ist ungefähr ein Jahr her, seit du diesen Kommentar gepostet hast. Sieht aus wie Firefox 4 ist alles gut. Chrome 11 schlägt Source-In (sieht aus wie Source-Atop), Source-Out (sieht aus wie Xor), Destination-In (kopiert nichts), Destination-Atop (sieht aus wie Destination-Over) und kopiert (sieht aus wie Quelle-über). Das ist ein bisschen enttäuschend, aber zumindest sollte es sicher sein, die anderen zu benutzen. Kann jemand das in IE9 testen? – mgiuca

+2

Sechs Monate später. Chrome 15 ist gut für alle. Firefox 8 unterstützt keine dunklere Version. IE9 wird die Seite überhaupt nicht laden (irgendeine Art von Fehler über das Onload-Ereignis), so dass ich nicht sagen kann, was es unterstützt. – snostorm