本文適合適合對canvas繪製、圖形學、前端視覺化有興趣的讀者閱讀。
楔子所有的事情都會有一個起因。
最近產品上需要做一個這樣的功能：給一些圖形做染色處理。想想這還不是順手拈來的事情，早就研究過圖形染色的技術。於是我把之前寫好的兩種演算法發給了小夥伴，讓他參照實現，第一種演算法是操縱像素、第二種使用了影像合成：globalCompositeOperation。
所有的事情都可能會有意外，寫程式更是如此了。
沒多久，小夥伴說，第二種演算法在firefox下不起作用。
探索原因聽說有bug，心中一驚。我測試過了的，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(); img.onload = 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; function drawPoint(pointX, ctxpointY) { ctxpointY .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) ; } </script></head><body onload=init(); style=background: red> <div> <canvas id=c width=1000 height=1000></canvas> </div></body></html>如何解決找到問題的原因了，解決方法其實簡單。
事情往往就是這樣，很多時候，要找到問題所在往往比解決問題還要困難。
解決方案其實很簡單
程式碼中加入判斷，判斷瀏覽器是否為FireFox。
如果是，則先把svg圖片繪製到臨時的canvas上面。
後續繪製用臨時的canvas取代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 = 'destination-out'; } img.src = 'diffuse.png'; var svg = new Image; svg.src = ./d.svg; var tempCanvas = svg; if(isvrefoxonload svg. = function(){ tempCanvas = document.createElement('canvas'); tempCanvas.width = svg.width; tempCanvas.height = svg.height; var tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(svg,0,0text('2d'); tempCtx.drawImage(svg,0,0,s ,svg.height); } } function drawPoint(pointX, pointY) { ctx.drawImage(tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2); , function (e) { drawPoint(e.clientX, e.clientY); }, false); }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。