HTML5画布:drawImage在Firefox上不起作用

HTML5 Canvas: drawImage not working on Firefox

本文关键字：Firefox 不起作用 drawImage 画布 HTML5      更新时间：2023-09-26

此代码可在chrome、opera-yandex和ie浏览器中运行，但未能在firefox上运行。

代码中的"el"是我的图像（像这样存储<img src="background.png"）。

fadeIn: function(el){
        var self = this;
        var alpha = 0;
        var interval = window.setInterval(function(){
            if (alpha < 1){
                self.ctx.clearRect(0, 0, Lottery.Canvas.width, Lottery.Canvas.height );
                alpha += 0.01;
                self.ctx.globalAlpha = alpha;
                self.ctx.drawImage(el, 0, 0);
            } else {
                clearInterval(interval);
            }
        });
    }

两个对firefox很重要的问题，

  1. setInterval需要一个间隔值，我将其设置为1ms
  2. 未定义变量alpha。我把它定义为0.01（你可能想创建一个局部变量，我把它作为一个globle）

在FF上测试。https://jsfiddle.net/rg1uyw1p/5/

var editor = {
ctx : "",
fadeIn: function  (el){
        var self = this;
        var interval = window.setInterval(function(){
            if (alpha < 1){
                self.ctx.clearRect(0, 0, Lottery.Canvas.width, Lottery.Canvas.height );
                alpha += 0.1;
                self.ctx.globalAlpha = alpha;
                self.ctx.drawImage(el, 0, 0);
                console.log("ALPHA: " +  alpha);
            } else {
            		console.log("CLEAR: " +  alpha);
                clearInterval(interval);
            }
        },1);
    },
};
Lottery = {};
alpha = 0.01;
Lottery.Canvas = document.getElementById("canvas");
editor.ctx = Lottery.Canvas.getContext("2d");
editor.fadeIn(document.getElementById("img"));
<img id="img" src="http://cdn.sstatic.net/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f">
<canvas id="canvas"  width="500" height="500"></canvas>

相关文章：