"Effacer" dans la toile html5

Question

J'ai un gribouillage d'application en html5 canvas, et je suis à essayer de comprendre la meilleure façon de mettre en œuvre une gomme de contrôle. Première impulsion était juste pour avoir de la gomme à dessiner la couleur d'arrière-plan [blanc], mais le problème est que si l'utilisateur se déplace d'une image ou d'une autre couche à l'endroit où ils ont été effacés, ils voient le dessin blanc où ils ont effacé.

Idéalement, j'aimerais avoir de l'effacement de contrôle de modifier les pixels en noir transparent. Je ne peux pas tout simplement utiliser lineTo pour ce faire, parce que, évidemment, il attire tout d'un noir transparent ligne sur elle, et qui laisse l'original doodle intacte. Des idées sur comment faire cela?

Merci.

Answer 1

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 de sauvegarder la précédente globalCompositeOperation, puis de la restaurer plus tard, sinon la transparence ne fonctionnera pas correctement!

Answer 2

Notez que firefox 3.6/4.0 mettre en oeuvre une "copie" par l'effacement de la totalité de l'arrière-plan de la première. Le w3c docs ne sont pas clairs quant à ce qui devrait se produire ici. Chrome (webkit?) interprète les specs que " seuls où les pixels sont effectivement dessiné, par exemple le résultat d'un accident vasculaire cérébral().

destination avec "rgba(255,255,255,1.0)", définit l'arrière-plan transparent où les pixels dans le framebuffer ne sont pas transparentes. laissant en arrière-plan transparent dans chrome et firefox.

copie de la page suivante localement, et de jouer avec les différentes couleurs/des opacités de la boîte bleue et rouge cercle, et n'oubliez pas de faire de la couleur d'arrière-plan de la page blanche! et

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

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

Answer 3

Regarder dans clearRect si votre gomme est un rectangle. Le clearRect fonction, conformément à la spécification, va rendre les pixels dans le rectangle noir transparent, comme vous le souhaitez.

Si vous souhaitez avoir d'autres gomme les formes [ie: cercle?] vous devez manipuler des données de pixels. Notez que si vous voulez un contour progressif-comme de la gomme, cela devient infernal.

La plupart de référence utile dans le monde: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element