이 기사는 캔버스 그리기, 그래픽, 프런트엔드 시각화에 관심이 있는 독자에게 적합합니다.
쐐기모든 것에는 원인이 있습니다.
최근에는 제품에 일부 그래픽을 염색하는 기능이 필요합니다. 생각해보면 이것은 쉽게 다가올 수 있는 일이 아니다. 나는 이미 그래픽 염색에 대한 기술을 공부한 적이 있다. 그래서 이전에 작성한 두 가지 알고리즘을 친구에게 보내서 참고로 구현해 달라고 요청했습니다. 첫 번째 알고리즘은 픽셀을 조작하는 것이고 두 번째 알고리즘은 이미지 합성인 globalCompositeOperation을 사용하는 것입니다.
특히 프로그램을 작성할 때 모든 것이 예상치 못한 일이 될 수 있습니다.
얼마 지나지 않아 내 친구는 두 번째 알고리즘이 Firefox에서는 작동하지 않는다고 말했습니다.
이유 알아보기버그가 있다는 말을 듣고 깜짝 놀랐습니다. 나는 그것을 테스트했고 FireFox에서도 테스트했습니다. 그래서 Firefox를 열고 예제를 실행해 보았는데, 괜찮고 문제도 없는 것을 확인했습니다.
그러나 소규모 파트너를 제품에 통합하는 데에는 문제가 있습니다. 차이점은 무엇입니까? 함께 조사한 결과, 마침내 제 샘플 코드와 제품 코드의 한 가지 차이점은 샘플 코드는 png 이미지를 사용하는 반면, 제품은 svg 이미지를 사용한다는 점을 발견했습니다.
svg 이미지에 문제가 있는 걸까요? svg 이미지를 가져와서 샘플 코드에 넣는 것은 실제로 잘못된 것입니다. 결론은 이미 명백하다:
FireFox 브라우저에서 Canvas 아래에 SVG 이미지를 그릴 때 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 = 'diffuse-out'; } img.src = 'diffuse.png'; var svg = new Image; svg.src = ./d.svg; function drawPoint(pointX, pointY) , 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(); 스타일=배경: 빨간색> <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() = function () { ctx.drawImage(img) , 0, 0, img.width * 2, img.height * 2); 'destination-out'; } img.src = 'diffuse.png'; var svg = new Image; svg.src = ./d.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 Network를 지지해 주시길 바랍니다.