Este artículo es adecuado para lectores interesados en el dibujo de lienzos, los gráficos y la visualización frontal.
cuñaTodo tiene una causa.
Recientemente, el producto necesita tener esa función: teñir algunos gráficos. Ahora que lo pienso, esto no es algo que resulte fácil. Ya he estudiado la tecnología del teñido gráfico. Entonces le envié los dos algoritmos que escribí antes a mi amigo y le pedí que los implementara como referencia. El primer algoritmo es para manipular píxeles y el segundo usa síntesis de imágenes: globalCompositeOperation.
Todo está sujeto a sorpresas, especialmente a la hora de escribir programas.
No mucho después, mi amigo dijo que el segundo algoritmo no funcionaba en Firefox.
Explora por quéMe sorprendí cuando escuché que había un error. Lo probé y también lo probé en Firefox. Entonces abrí Firefox, comencé el ejemplo y descubrí que estaba bien y que no había ningún problema.
Pero existen problemas a la hora de integrar pequeños socios en los productos. ¿Cuál es la diferencia? Después de investigar juntos, finalmente descubrí que una diferencia entre mi código de muestra y el código del producto es que el código de muestra usa imágenes png, mientras que el producto usa imágenes svg.
¿Podría ser un problema con la imagen svg? Tomar una imagen svg y ponerla en el código de muestra es incorrecto. La conclusión ya es obvia:
En el navegador FireFox, al dibujar imágenes SVG en Canvas, la configuración de globalCompositeOperation no tendrá efecto.
El siguiente es un fragmento de código para prueba. ctx.globalCompositeOperation = 'destination-out' significa usar la forma de la imagen de origen para vaciar la imagen de destino.
En otros navegadores, el siguiente código es válido y está vacío. pero en
No funciona en Firefox:
<html><head> <script> function init() { var canvas = document.getElementById('c'); var ctx = canvas.getContext('2d'); función () { ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destino-out'; } img.src = 'diffuse.png'; var svg = nueva imagen; svg.src = ./d.svg; function drawPoint(pointX, pointY) { ctx.drawImage(svg) , puntoX - svg.ancho / 4, puntoY - svg.alto / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener('click', función (e) { drawPoint(e.clientX, e.clientY); }, false } </script></); cabeza><cuerpo onload=init(); estilo=fondo: rojo> <div> <canvas id=c ancho=1000 alto=1000></canvas> </div></body></html> como resolverSe encuentra la causa del problema y la solución es realmente simple.
Ese suele ser el caso y muchas veces es más difícil encontrar el problema que resolverlo.
La solución es realmente muy sencilla.
Agregue un juicio al código para determinar si el navegador es Firefox.
Si es así, primero dibuje la imagen svg en el lienzo temporal.
El dibujo posterior utiliza un lienzo temporal para reemplazar la imagen svg.
Por ejemplo, el código anterior se puede mejorar de la siguiente manera:
función init() { var lienzo = document.getElementById('c'); var ctx = lienzo.getContext('2d'); var img = nueva imagen(); , 0, 0, img.width * 2, img.height * 2); 'destino-fuera'; { 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); puntoY) { ctx.drawImage(tempCanvas, puntoX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2 } canvas.addEventListener('click', function (e) { drawPoint(e.clientX, e.clientY); ); }, FALSO); }Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.