怎么在FireFox中使用Canvas合成Bug-創(chuàng)新互聯(lián)

怎么在FireFox中使用Canvas合成Bug？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)公司成立與2013年，先為平樂等服務(wù)建站，平樂等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為平樂企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

楔子

所有的事情都會有一個起因。

最近產(chǎn)品上需要做一個這樣的功能：給一些圖形進(jìn)行染色處理。想想這還不是順手拈來的事情，早就研究過圖形染色的技術(shù)。于是我把之前寫好的兩種算法發(fā)給了小伙伴，讓他參照實現(xiàn)，第一種算法是操縱像素、第二種使用了圖像合成：globalCompositeOperation。

所有的事情都可能會有意外，寫程序更是如此了。

沒多久，小伙伴說，第二種算法在firefox下不起作用。

探索原因

聽說有bug，心中一驚。我測試過了的，F(xiàn)ireFox下面也測試過的。于是我打開火狐瀏覽器，啟動示例，發(fā)現(xiàn)是好的，沒有問題。

但是小伙伴集成到產(chǎn)品中就有問題。差別在哪兒呢？通過一起排查，最終發(fā)現(xiàn)我的示例代碼和產(chǎn)品中代碼的一個區(qū)別是：示例代碼用的是png圖片，而產(chǎn)品中用的是svg圖片。

難道是svg圖片的問題，拿一個svg圖片放到示例代碼中，果然不對。結(jié)論已經(jīng)明顯：

FireFox瀏覽器下，用Canvas下繪制繪制SVG圖的時候，globalCompositeOperation的設(shè)置將不生效。

下面是一段用于測試的代碼，ctx.globalCompositeOperation = 'destination-out' 表示用源圖像的形狀去挖空目標(biāo)圖像。

在其他瀏覽器中，以下代碼中是生效的，又挖空的效果。但是在

在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, 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);
        }
    </script>
</head>
<body onload="init();" style="background: red">
    <div>
        <canvas id="c" width="1000" height="1000"></canvas>
    </div>
</body>
</html>

如何解決

找到問題的原因了，解決方法其實簡單。

事情往往就是這樣，很多時候，找到問題所在往往比解決問題要難。

解決方案其實很簡單

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

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

后續(xù)繪制用臨時的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)于怎么在FireFox中使用Canvas合成Bug問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

當(dāng)前文章：怎么在FireFox中使用Canvas合成Bug-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://muchs.cn/article42/highc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗、Google、自適應(yīng)網(wǎng)站、商城網(wǎng)站、域名注冊、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容