Este artigo é adequado para leitores interessados em desenho em tela, gráficos e visualização front-end.
cunhaTudo tem uma causa.
Recentemente, o produto precisa ter essa função: tingir alguns grafismos. Pensando bem, isso não é algo fácil. Já estudei a tecnologia do tingimento gráfico. Então enviei os dois algoritmos que escrevi antes para meu amigo e pedi a ele que os implementasse como referência. O primeiro algoritmo é para manipular pixels, e o segundo usa síntese de imagem: globalCompositeOperation.
Tudo está sujeito a surpresas, principalmente na hora de escrever programas.
Pouco tempo depois, meu amigo disse que o segundo algoritmo não funcionava no Firefox.
Explorar por quêFiquei chocado quando soube que havia um bug. Eu testei e também no FireFox. Então abri o Firefox e comecei o exemplo, e descobri que estava tudo bem e não havia problema.
Mas existem problemas na integração de pequenos parceiros nos produtos. Qual é a diferença? Depois de investigarmos juntos, finalmente descobri que uma diferença entre meu código de amostra e o código do produto é que o código de amostra usa imagens png, enquanto o produto usa imagens svg.
Poderia ser um problema com a imagem SVG. Pegar uma imagem SVG e colocá-la no código de exemplo é realmente errado. A conclusão já é óbvia:
No navegador FireFox, ao desenhar imagens SVG no Canvas, a configuração de globalCompositeOperation não terá efeito.
A seguir está um trecho de código para teste. ctx.globalCompositeOperation = 'destination-out' significa usar o formato da imagem de origem para esvaziar a imagem de destino.
Em outros navegadores, o código a seguir é válido e vazio. Mas em
Não funciona no FireFox:
<html><head> <script> function init() { var canvas = document.getElementById('c'); função () {ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destino-out'; } img.src = 'diffuse.png'; , pontoX - svg.width / 4, pontoY - svg.height / 4, svg.width / 2, svg.height / 2); } canvas.addEventListener('clique', function (e) { drawPoint(e.clientX, e.clientY); }, false } </script></ head><body onload=init(); estilo=background: vermelho> <div> <canvas id=c width=1000 height=1000></canvas> </div></body></html> Como resolverA causa do problema foi encontrada e a solução é realmente simples.
Muitas vezes é esse o caso, e muitas vezes é mais difícil encontrar o problema do que resolvê-lo.
A solução é realmente muito simples
Adicione um julgamento ao código para determinar se o navegador é FireFox.
Nesse caso, primeiro desenhe a imagem SVG na tela temporária.
O desenho subsequente usa uma tela temporária para substituir a imagem SVG.
Por exemplo, o código acima pode ser melhorado da seguinte forma:
function init() { var canvas = document.getElementById('c'); , 0, 0, img.width * 2, img.height * 2); 'destino-out'; } img.src = 'diffuse.png'; var svg = nova imagem; { tempCanvas = document.createElement('canvas'); svg.width; tempCanvas.height = svg.height; var tempCtx = tempCanvas.getContext('2d'); pontoY) { ctx.drawImage(tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2 } canvas.addEventListener('clique', function (e) { drawPoint(e.clientX, e.clientY); ); }, falso);O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.