HTML5画布drawImage()在FireFox上无法使用。

Question

问题：我正在做一个项目，需要在画布上绘制一个符号的动画。我正在做一个项目，我需要在画布上画一个符号的动画。这很好，在chrome上也能正常工作，但在FireFox上却什么也画不出来。没有错误信息或任何东西。

这是个问题吗？

我可以用其他的方法来达到同样的效果吗？

能否让这个方法在所有的浏览器上都能工作？

我的整个功能。

DRAW_ANIM(ctx, dimensions, drawProperties, svg){
        let dashAnim = drawProperties.dash;

        let svgStart = svg[0]; // -- sets up the first part to keep te elements rendered --

        /* -- sets the size a bit smaller than the cell -- */
        dimensions.x += dimensions.w * .1;
        dimensions.y += dimensions.h * .1;
        dimensions.w *= .8;
        dimensions.h *= .8;
        

        let maxRange; // -- number of total elements --
        let range = 1; // -- currently animated --
        let index = 1;

        while (svg[1].indexOf(`id="s${index}"`) != -1) { // -- gets the total number of elements --
            maxRange = index;
            index++;
        }
        

        /* -- from the dashOffset value animates to 0 -- */
        var t = TweenMax.to(dashAnim, this.calcElemAnimDur(maxRange, drawProperties.animDur), { value: 0 });

        render();
        function render() {
            /* -- element id => id="s<index>" because can't be a regular int -- */
            let style = ` 
            #s${range}{
                stroke: ${drawProperties.strokeColor};
                stroke-dashArray: ${svg[2]} !important;
                stroke-dashOffset: ${dashAnim.value} !important;
            }
            `;

            let xml = svgStart + style + svg[1]; // -- inserts the style and joins the svg --
            let svg64 = btoa(xml); // -- b64 encode --
            let b64Start = 'data:image/svg+xml;base64,'; // -- the header --
            let image64 = b64Start + svg64; // -- joins tghe header and the b64 svg --

            let img = new Image(); // -- a new image --

            img.onload = () => { // -- if the image is ready draws it --
                /* -- clears the area to draw a new frame -- */
                ctx.clearRect(dimensions.x - drawProperties.shadowSize * 1.2,
                              dimensions.y - drawProperties.shadowSize * 1.2,
                              dimensions.w + drawProperties.shadowSize * 2.4,
                              dimensions.h + drawProperties.shadowSize * 2.4);

                /* -- sets up the style -- */
                ctx.shadowColor = drawProperties.shadowColor;
                ctx.shadowBlur = drawProperties.shadowSize;

                /* -- draws the image -- */
                ctx.drawImage(img,
                              dimensions.x,
                              dimensions.y, 
                              dimensions.w, 
                              dimensions.h);
            }
            img.src = image64; // -- sets the image to the svg --

            if (dashAnim.value == 0) { // -- if finished with one element gets the next --
                range++;
                svgStart += style; // -- keeps the finished element rendered --
                t.play(0);
            }

            if (range > maxRange) { return } // -- if animation is ready ends the loop --

            window.requestAnimationFrame(render); // -- the next frame --
        }
    }

重要的部分

            let xml = svgStart + style + svg[1]; // -- inserts the style and joins the svg --
            let svg64 = btoa(xml); // -- b64 encode --
            let b64Start = 'data:image/svg+xml;base64,'; // -- the header --
            let image64 = b64Start + svg64; // -- joins tghe header and the b64 svg --

            let img = new Image(); // -- a new image --

            img.onload = () => { // -- if the image is ready draws it --
                /* -- clears the area to draw a new frame -- */
                ctx.clearRect(dimensions.x - drawProperties.shadowSize * 1.2,
                              dimensions.y - drawProperties.shadowSize * 1.2,
                              dimensions.w + drawProperties.shadowSize * 2.4,
                              dimensions.h + drawProperties.shadowSize * 2.4);

                /* -- sets up the style -- */
                ctx.shadowColor = drawProperties.shadowColor;
                ctx.shadowBlur = drawProperties.shadowSize;

                /* -- draws the image -- */
                ctx.drawImage(img,
                              dimensions.x,
                              dimensions.y, 
                              dimensions.w, 
                              dimensions.h);
            }
            img.src = image64;

Answer 1

解决办法。

问题确实不在drawImage()方法上。是我写svg的方式。

错了。

<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 403.54 403.54">
            <defs>
                <style>
                    .shape{
                        fill: transparent;
                        stroke-dasharray: 570;
                        stroke-dashoffset: 570;
                    }
                </style>
            </defs>
            <line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
            <line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
        </svg>

很好，谢谢Helder Sepulveda

<svg class="svg x-color" xmlns="http://www.w3.org/2000/svg" width="403.54" height="403.54" version="1.1">
            <defs>
                <style>
                    .shape{
                        fill: transparent;
                        stroke-dasharray: 570;
                        stroke-dashoffset: 570;
                    }
                </style>
            </defs>
            <line id="s1" class="shape" x1="1.77" y1="1.77" x2="401.77" y2="401.77"/>
            <line id="s2" class="shape" x1="401.77" y1="1.77" x2="1.77" y2="401.77"/>
        </svg>

感谢Helder Sepulveda