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

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

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

楔子

所有的事情都會(huì)有一個(gè)起因。

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

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

沒(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 下不生效：

<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>

如何解決

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

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

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

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

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

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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