javascript动画不适用于chrome和IE

javascript animation not working on chrome and IE

本文关键字：IE chrome 适用于 动画 不适用 javascript      更新时间：2023-09-26

这是一个类似矩阵的动画，在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);

哎呀！您的函数定义格式不正确。。。

试试这个：

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

祝你的项目好运！

相关文章：