Dieser Artikel ist für Leser geeignet, die sich für Leinwandzeichnung, Grafiken und Front-End-Visualisierung interessieren.
KeilAlles hat eine Ursache.
Seit kurzem muss das Produkt über eine solche Funktion verfügen: das Einfärben einiger Grafiken. Wenn ich darüber nachdenke, fällt mir auf, dass dies nicht einfach ist. Ich habe die Technologie des grafischen Färbens bereits studiert. Also schickte ich die beiden Algorithmen, die ich zuvor geschrieben hatte, an meinen Freund und bat ihn, sie als Referenz zu implementieren. Der erste Algorithmus dient der Manipulation von Pixeln und der zweite verwendet die Bildsynthese: globalCompositeOperation.
Vor allem beim Schreiben von Programmen ist alles anfällig für Überraschungen.
Kurz darauf sagte mein Freund, dass der zweite Algorithmus unter Firefox nicht funktionierte.
Entdecken Sie, warumIch war schockiert, als ich hörte, dass es einen Fehler gab. Ich habe es getestet, und ich habe es auch unter Firefox getestet. Also öffnete ich Firefox und startete das Beispiel und stellte fest, dass es in Ordnung war und es kein Problem gab.
Es gibt jedoch Probleme bei der Integration kleiner Partner in Produkte. Was ist der Unterschied? Nach gemeinsamen Nachforschungen habe ich schließlich herausgefunden, dass ein Unterschied zwischen meinem Beispielcode und dem Code im Produkt darin besteht, dass der Beispielcode PNG-Bilder verwendet, während das Produkt SVG-Bilder verwendet.
Könnte es ein Problem mit dem SVG-Bild sein? Es ist tatsächlich falsch, ein SVG-Bild zu nehmen und es in den Beispielcode einzufügen. Das Fazit liegt schon auf der Hand:
Wenn im Firefox-Browser SVG-Bilder unter Canvas gezeichnet werden, wird die Einstellung von globalCompositeOperation nicht wirksam.
Das Folgende ist ein Code zum Testen. ctx.globalCompositeOperation = 'destination-out' bedeutet, dass die Form des Quellbilds verwendet wird, um das Zielbild auszuhöhlen.
In anderen Browsern ist der folgende Code gültig und ausgehöhlt. Aber drin
Funktioniert nicht unter Firefox:
<html><head> <script> function init() { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); function () { ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destination-out'; } img.src = 'diffuse.png'; var svg = new Image; svg.src = ./d.svg; function drawPoint(pointX, pointY) { ctx.drawImage(svg , pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener('click', function (e) { drawPoint(e.clientX, e.clientY); }, false); head><body onload=init(); style=background: red> <div> <canvas id=c width=1000 height=1000></canvas> </div></body></html> So lösen Sie esDie Ursache des Problems ist gefunden und die Lösung ist eigentlich einfach.
Das ist oft der Fall, und oft ist es schwieriger, das Problem zu finden, als es zu lösen.
Die Lösung ist eigentlich ganz einfach
Fügen Sie dem Code eine Beurteilung hinzu, um festzustellen, ob es sich bei dem Browser um FireFox handelt.
Wenn ja, zeichnen Sie zunächst das SVG-Bild auf die temporäre Leinwand.
Beim nachfolgenden Zeichnen wird das SVG-Bild durch eine temporäre Leinwand ersetzt.
Der obige Code kann beispielsweise wie folgt verbessert werden:
function init() { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); var img = new Image() { ctx.drawImage(img , 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destination-out'; } img.src = 'diffuse.png'; var svg.src = ./d.svg; if(isFirefox){ { tempCanvas = document.createElement('canvas'); tempCanvas.width = svg.width; tempCanvas.height = svg.height; var tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(svg,0,0,svg.width,svg.height); pointY) { ctx.drawImage(tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener('click', function (e) { drawPoint(e.clientX, e.clientY ); }, FALSCH); }Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.