详解FireFox下Canvas应用图象生成绘图SVG的Bug

日期:2021-02-26 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑

本文合适合适对canvas绘图、图型学、前端开发可视性化感兴趣爱好的读者阅读文章。

楔子

全部的事儿都会有1个诱因。

近期商品上必须做1个这样的作用:给1些图型开展染色解决。想一想这还并不是随手拈来的事儿,早就科学研究过图型染色的技术性。因而我把以前写好的两种优化算法发给了小伙子伴,让他参考完成,第1种优化算法是控制像素、第2种应用了图象生成:globalCompositeOperation。

全部的事儿都可以能会成心外,写程序流程更是这般了。

不久,小伙子伴说,第2种优化算法在firefox下不起功效。

探寻缘故

听闻有bug,心中1惊。我检测过了的,FireFox下面也检测过的。因而我开启火狐访问器,起动示例,发现是好的,沒有难题。

可是小伙子伴集成化到商品中就有难题。 区别在哪儿儿呢? 根据1起清查,最后发现我的示例编码和商品中编码的1个差别是:示例编码用的是png照片,而商品选用的是svg照片。

难道说是svg照片的难题,拿1个svg照片放到示例编码中,果真不对。结果早已显著:

FireFox访问器下,用Canvas下绘图绘图SVG图的情况下,globalCompositeOperation的设定将不起效。

下面是1段用于检测的编码,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, 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上面。

后续绘图用临时性的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(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);
        }

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。