"Löschen" in html5-Canvas

Question

Ich habe eine Doodling-Anwendung in html5 Canvas, und ich versuche, herauszufinden, der beste Weg, um eine Radiergummi-Steuerung zu implementieren. Der erste Impuls war, dass der Radiergummi die Hintergrundfarbe [weiß] zeichnet, aber das ist problematisch, denn wenn der Benutzer ein Bild oder eine andere Ebene dorthin bewegt, wo er zuvor gelöscht hat, sieht er die weiße Zeichnung, wo er gelöscht hat.

Im Idealfall möchte ich, dass das Steuerelement zum Löschen die Pixel in schwarz transparent ändert. Ich kann nicht einfach lineTo verwenden, um dies zu tun, weil, natürlich, es zeichnet nur eine schwarze transparente Linie über sie, und das lässt das ursprüngliche Doodle unberührt. Irgendwelche Ideen, wie man das machen kann?

Gracias.

Answer 1

Wenn Sie einen schwarzen, transparenten Strich zeichnen möchten, sollten Sie das wahrscheinlich tun:

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

Denken Sie daran, die vorherige globalCompositeOperation zu speichern und später wiederherzustellen, sonst funktioniert die Transparenz nicht richtig!

Answer 2

Beachten Sie, dass Firefox 3.6/4.0 das "Kopieren" so implementiert, dass zuerst der gesamte Hintergrund gelöscht wird. Die w3c-Dokumente sind nicht klar, was hier geschehen soll. Chrome (Webkit?) interpretiert die Spezifikationen als "nur dort, wo Pixel tatsächlich gezeichnet werden", zum Beispiel das Ergebnis einer stroke().

destination-out mit "rgba(255,255,255,1.0)", setzt den Hintergrund auf transparent, wenn die Pixel im Framebuffer nicht transparent sind. Der Hintergrund bleibt sowohl in Chrome als auch in Firefox transparent.

Kopieren Sie die folgende Seite lokal, und spielen Sie mit verschiedenen Farben/Optionen für den blauen Kasten und den roten Kreis, und vergessen Sie nicht, die Hintergrundfarbe der Seite nicht weiß zu machen! und

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

Sie werden feststellen, dass die Browser sehr unterschiedlich sind.

Answer 3

Schauen Sie sich clearRect an, wenn Ihr Radiergummi ein Rechteck ist. Die clearRect-Funktion, wie in der Spezifikation, wird Pixel in das Rechteck transparent schwarz, wie Sie wollen.

Wenn Sie andere Radiergummiformen wünschen [z. B. Kreis?], müssen Sie die Pixeldaten manipulieren. Beachten Sie, dass, wenn Sie eine Feder wie Radiergummi wollen, wird dies höllisch.

Das hilfreichste Nachschlagewerk der Welt: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element