摘要：本文適合適合對(duì)繪制圖形學(xué)前端可視化感興趣的讀者閱讀。結(jié)論已經(jīng)明顯瀏覽器下，用下繪制繪制圖的時(shí)候，的設(shè)置將不生效。下面是一段用于測(cè)試的代碼，表示用源圖像的形狀去挖空目標(biāo)圖像。后續(xù)繪制用臨時(shí)的替代圖片。

本文適合適合對(duì)canvas繪制、圖形學(xué)、前端可視化感興趣的讀者閱讀。

所有的事情都會(huì)有一個(gè)起因。
最近產(chǎn)品上需要做一個(gè)這樣的功能：給一些圖形進(jìn)行染色處理。想想這還不是順手拈來(lái)的事情，早就研究過(guò)圖形染色的技術(shù)。于是我把之前寫(xiě)好的兩種算法發(fā)給了小伙伴，讓他參照實(shí)現(xiàn)，第一種算法是操縱像素、第二種使用了圖像合成：globalCompositeOperation。
所有的事情都可能會(huì)有意外，寫(xiě)程序更是如此了。
沒(méi)多久，小伙伴說(shuō)，第二種算法在firefox下不起作用。

聽(tīng)說(shuō)有bug，心中一驚。我測(cè)試過(guò)了的，F(xiàn)ireFox下面也測(cè)試過(guò)的。于是我打開(kāi)火狐瀏覽器，啟動(dòng)示例，發(fā)現(xiàn)是好的，沒(méi)有問(wèn)題。
但是小伙伴集成到產(chǎn)品中就有問(wèn)題。 差別在哪兒呢？ 通過(guò)一起排查，最終發(fā)現(xiàn)我的示例代碼和產(chǎn)品中代碼的一個(gè)區(qū)別是：示例代碼用的是png圖片，而產(chǎn)品中用的是svg圖片。
難道是svg圖片的問(wèn)題，拿一個(gè)svg圖片放到示例代碼中，果然不對(duì)。結(jié)論已經(jīng)明顯：
FireFox瀏覽器下，用Canvas下繪制繪制SVG圖的時(shí)候，globalCompositeOperation的設(shè)置將不生效。
下面是一段用于測(cè)試的代碼，ctx.globalCompositeOperation = "destination-out" 表示用源圖像的形狀去挖空目標(biāo)圖像。
在其他瀏覽器中，以下代碼中是生效的，又挖空的效果。但是在
在FireFox 下不生效：

    


    

        
    

>

找到問(wèn)題的原因了，解決方法其實(shí)簡(jiǎn)單。
事情往往就是這樣，很多時(shí)候，找到問(wèn)題所在往往比解決問(wèn)題要難。
解決方案其實(shí)很簡(jiǎn)單

代碼中加入判斷，判斷瀏瀏覽器是否是FireFox。

如果是，則先把svg圖片繪制到臨時(shí)的canvas上面。

后續(xù)繪制用臨時(shí)的canvas替代svg圖片。

比如上面代碼可以改進(jìn)如下：

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(isFirefox){
                             svg.onload = function(){
                                  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);
                             }           
                         }
                      
            function drawPoint(pointX, 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);
            }, false);
        }

歡迎關(guān)注公眾號(hào)“ITman彪叔”。彪叔，擁有10多年開(kāi)發(fā)經(jīng)驗(yàn)，現(xiàn)任公司系統(tǒng)架構(gòu)師、技術(shù)總監(jiān)、技術(shù)培訓(xùn)師、職業(yè)規(guī)劃師。熟悉Java、JavaScript、Python語(yǔ)言，熟悉數(shù)據(jù)庫(kù)。熟悉java、nodejs應(yīng)用系統(tǒng)架構(gòu)，大數(shù)據(jù)高并發(fā)、高可用、分布式架構(gòu)。在計(jì)算機(jī)圖形學(xué)、WebGL、前端可視化方面有深入研究。對(duì)程序員思維能力訓(xùn)練和培訓(xùn)、程序員職業(yè)規(guī)劃有濃厚興趣。