Cet article convient aux lecteurs intéressés par le dessin sur toile, les graphiques et la visualisation frontale.
coinTout a une cause.
Récemment, le produit doit avoir une telle fonction : teindre certains graphiques. À bien y penser, ce n’est pas quelque chose qui vient facilement. J’ai déjà étudié la technologie de la teinture graphique. J'ai donc envoyé les deux algorithmes que j'ai écrits auparavant à mon ami et lui ai demandé de les implémenter comme référence. Le premier algorithme consiste à manipuler les pixels, et le second utilise la synthèse d'images : globalCompositeOperation.
Tout est sujet à des surprises, notamment lors de l'écriture de programmes.
Peu de temps après, mon ami m’a dit que le deuxième algorithme ne fonctionnait pas sous Firefox.
Découvrez pourquoiJ'ai été choqué quand j'ai entendu qu'il y avait un bug. Je l'ai testé, et je l'ai également testé sous FireFox. J'ai donc ouvert Firefox et démarré l'exemple, et j'ai constaté que tout allait bien et qu'il n'y avait aucun problème.
Mais l’intégration de petits partenaires dans les produits pose des problèmes. Quelle est la différence ? Après avoir étudié ensemble, j'ai finalement découvert qu'une différence entre mon exemple de code et le code du produit est que l'exemple de code utilise des images png, tandis que le produit utilise des images svg.
Cela pourrait-il être un problème avec l'image svg ? Prendre une image svg et la mettre dans l'exemple de code est en effet une erreur. La conclusion est déjà évidente :
Sous le navigateur FireFox, lors du dessin d'images SVG sous Canvas, le paramètre de globalCompositeOperation ne prendra pas effet.
Ce qui suit est un morceau de code à tester. ctx.globalCompositeOperation = 'destination-out' signifie utiliser la forme de l'image source pour évider l'image de destination.
Dans les autres navigateurs, le code suivant est valide et évidé. Mais dans
Ne fonctionne pas sous 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; , pointX - svg.largeur / 4, pointY - svg.hauteur / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener('click', function (e) { drawPoint(e.clientX, e.clientY); }, false } </script></ head><body onload=init(); style=background: red> <div> <canvas id=c width=1000 height=1000></canvas> </div></body></html> Comment résoudreLa cause du problème est trouvée et la solution est en réalité simple.
C’est souvent le cas, et il est souvent plus difficile de trouver le problème que de le résoudre.
La solution est en fait très simple
Ajoutez un jugement au code pour déterminer si le navigateur est FireFox.
Si tel est le cas, dessinez d’abord l’image svg sur la toile temporaire.
Le dessin ultérieur utilise un canevas temporaire pour remplacer l'image svg.
Par exemple, le code ci-dessus peut être amélioré comme suit :
function init() { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); var img = new Image(); , 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destination-out'; } img.src = 'diffuse.png'; var svg = new Image; { 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('clic', function (e) { drawPoint(e.clientX, e.clientY ); }, FAUX); }Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.