Question

这是一个类似矩阵的动画，在Firefox上测试时效果很好，但在Chrome和IE上只显示按钮。它与改变颜色的功能有关，但实际上我在代码中包含的任何额外功能都会使整个功能无效。

var c = document.getElementById("c");
var ctx = c.getContext("2d");
var color = "blue";

// setting canvas dimension
c.height = 500;
c.width = 500;


//the numbers that will be printed out
var numbers = "0123456789";
//create an array of single numbers
numbers = numbers.split("");

var font_size = 12;
var columns = c.width/font_size; //number of columns for the rain
//create an array of drops - one per column
var matrix = [];
for(var x = 0; x < columns; x++)
    matrix[x] = c.height/font_size+1;

//functions to change the colour of the matrix
function setBlue() color = "blue";
function setGreen() color = "green";
function setRed() color = "red";

//drawing the matrix
function draw() {
    //black background with transparency so that the drops leave trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);

    if (color == "blue"){
    ctx.fillStyle = "#00ffd2";
    }else if (color == "green"){
    ctx.fillStyle = "#0f0";
    }else if (color == "red"){
    ctx.fillStyle = "#ff0008";
    }

    ctx.font = font_size + "px papyrus";
    //loop the drawing
    for(var i = 0; i < matrix.length; i++)
    {
        //print random character
        var text = numbers[Math.floor(Math.random()*numbers.length)];
        ctx.fillText(text, i*font_size, matrix[i]*font_size);

        //add randomness and send the character to the top of the screen
        if(matrix[i]*font_size > c.height && Math.random() > 0.95)
            matrix[i] = 0;

        matrix[i]++;

    }
}

setInterval(draw, 30);

Answer 1

糟糕！您的函数定义格式错误......

试试这个：

//functions to change the colour of the matrix
function setBlue(){ color = "blue";}
function setGreen(){ color = "green";}
function setRed(){ color = "red";}

祝你的项目好运！

javascript动画不适用于chrome和IE

1 个答案: