анимация JavaScript не работает на Chrome и IE

0

Это матричная анимация, и она отлично работает при тестировании в 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);
Теги:
canvas
google-chrome

1 ответ

1
Лучший ответ

К сожалению! Определения функций неверны...

Попробуй это:

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

Удачи с вашим проектом!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню