详解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);
        }

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

上一篇：HTML5 实战演练PHP之Web网页页面表单设计方案返回下一篇：没有了