Эта статья подойдет читателям, которые интересуются рисованием на холсте, графикой и фронтальной визуализацией.
клинУ всего есть причина.
В последнее время в продукте должна быть такая функция: окрашивание графики. Если подумать, это непростое дело. Технологию графического окрашивания я уже изучил. Поэтому я отправил два написанных ранее алгоритма своему другу и попросил его реализовать их в качестве эталона. Первый алгоритм предназначен для управления пикселями, а второй использует синтез изображений: globalCompositeOperation.
Все подвержено неожиданностям, особенно при написании программ.
Вскоре мой друг сказал, что второй алгоритм не работает в Firefox.
Узнайте, почемуЯ был шокирован, когда услышал, что есть ошибка. Я тестировал это, а также тестировал под FireFox. Итак, я открыл Firefox, запустил пример и обнаружил, что все в порядке и проблем нет.
Но есть проблемы с интеграцией мелких партнёров в продукты. Какая разница? После совместного исследования я наконец обнаружил, что единственное различие между моим примером кода и кодом продукта заключается в том, что пример кода использует изображения PNG, а продукт — изображения svg.
Может ли быть проблема с изображением SVG? Взять изображение SVG и поместить его в пример кода действительно неправильно. Вывод уже очевиден:
В браузере FireFox при рисовании изображений SVG под Canvas настройка globalCompositeOperation не вступит в силу.
Ниже приведен фрагмент кода для тестирования. ctx.globalCompositeOperation = 'destination-out' означает использование формы исходного изображения для выделения целевого изображения.
В других браузерах следующий код действителен и пуст. Но в
Не работает в FireFox:
<html><head> <script> function init() { var Canvas = document.getElementById('c'); var ctx = Canvas.getContext('2d'); var img = new Image(); function () { ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'destination-out'; } img.src = 'diffuse.png'; var svg = новое изображение; svg.src = ./d.svg; функция 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> Как решитьПричина проблемы найдена, а решение на самом деле простое.
Зачастую это так, и зачастую труднее обнаружить проблему, чем решить ее.
Решение на самом деле очень простое
Добавьте в код оценку, определяющую, является ли браузер FireFox.
Если да, сначала нарисуйте изображение SVG на временном холсте.
Последующий рисунок использует временный холст для замены изображения SVG.
Например, приведенный выше код можно улучшить следующим образом:
function init() { var Canvas = document.getElementById('c'); var ctx = Canvas.getContext('2d'); var img = new Image(); img.onload = function () { ctx.drawImage(img) , 0, 0, img.width * 2, img.height * 2); ctx.globalCompositeOperation = 'пункт назначения'; } img.src = 'diffuse.png'; вар svg = новое изображение; svg.src = ./d.svg; var tempCanvas = svg; if (isFirefox) { svg.onload = function() { tempCanvas = document.createElement('canvas'); 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); ); }, ЛОЖЬ); }Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.