javascript動畫無法在Chrome和IE上工作

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 = ""; 
//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";} 

祝你的項目！