"Effacement" dans le canevas html5

J'ai une application de griffonnage en canevas html5, et j'essaie de trouver la meilleure façon d'implémenter un contrôle d'effaceur. La première impulsion était juste que la gomme dessine la couleur d'arrière-plan [blanc], mais cela pose problème car si l'utilisateur déplace une image ou un autre calque vers l'endroit où il l'a déjà effacé, il voit le dessin blanc effacé."Effacement" dans le canevas html5

Idéalement, j'aimerais que le contrôle d'effacement change les pixels en noir transparent. Je ne peux pas simplement utiliser lineTo pour le faire car, évidemment, il dessine juste une ligne noire transparente dessus, et cela laisse intacte le doodle original. auriez vous des idées pour faire ça?

Merci.

Source

2010-07-25 Matthew

http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp – zloctb

Que signifie "noir transparent"? Si c'est complètement transparent, peu importe de quelle couleur il s'agit, n'est-ce pas? –

Shh, ne pisse pas les adorateurs de la Licorne Invisible Rose;) – BarbaraKwarc

Si vous voulez dessiner un trait noir transparent, vous voulez probablement:

context.globalCompositeOperation = "destination-out"; 
context.strokeStyle = "rgba(0,0,0,1)";

N'oubliez pas d'enregistrer le globalCompositeOperation précédent, puis restaurer ultérieurement ou la transparence ne fonctionnera pas correctement!

Source

2010-07-26 11:01:41 andrewmu

merci! ça a fait l'affaire! : D – Matthew

note: comme l'indique @Tim, vous devrez peut-être avoir un style de 'rgba (0,0,0,1.0)' pour travailler sur les implémentations actuelles de Canvas 2D. – andrewmu

Regardez dans clearRect si votre gomme est un rectangle. La fonction clearRect, conformément à la spécification, rendra les pixels du rectangle transparents en noir, comme vous le souhaitez.

Si vous souhaitez avoir d'autres formes de gomme [c.-à-d.: Cercle?], Vous devez manipuler les données de pixel. Notez que si vous voulez une gomme à plumes, cela devient infernal.

référence les plus utiles dans le monde: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

Source

2010-07-25 11:01:36 Warty

Notez que firefox 3.6/4.0 implémente 'copier' en effaçant tout l'arrière-plan en entier. Les documents W3C ne sont pas claires quant à ce qui devrait se passer ici. Chrome (webkit?) Interprète les spécifications comme étant «uniquement là où les pixels sont réellement dessinés», par exemple le résultat d'un trait(). Destination-out avec "rgba (255,255,255,1.0)", définit l'arrière-plan sur transparent où les pixels dans le framebuffer ne sont pas transparents. laissant un fond transparent à la fois chrome et firefox.

Copiez la page suivante localement, et jouez avec différentes couleurs/opacités pour la boîte bleue et le cercle rouge, et n'oubliez pas de rendre la couleur de fond de la page non blanche! et

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

Vous trouverez les navigateurs sont très différentes.

Source

2011-05-22 05:16:45 Tim

"Effacement" dans le canevas html5

Répondre

Questions connexes