Изменить фон холста onclick

Question

У меня есть две петли, создающие много кругов на холсте. Используя таймер и функцию doTinyCircles, я делаю круги мигающими разными цветами. Я хотел, чтобы это отображалось при загрузке, и при нажатии на холст я хочу, чтобы цвет фона менялся с помощью метода randomColor(), который я создал. Я запутался в методах холста. Я пробовал использовать fillStyle, затем strokeStyle, но я продолжаю получать прозрачный фон.

var CANVAS; 
var CONTEXT; 
var TIMER; 

function myTimer() { 
    TIMER = setInterval("doTinyCircles();", 30); 
} 

window.onload = function() { 
    CANVAS = document.getElementById("canvas"); 
    CONTEXT = CANVAS.getContext("2d"); 
    CONTEXT.strokeRect(0, 0, CANVAS.width, CANVAS.height); 
    CONTEXT.fillRect = (0, 0, CANVAS.width, CANVAS.height); 
    CONTEXT.fillStyle = randomColor(); 
    CONTEXT.translate(32, 32); 
    myTimer(); 
    document.getElementById("canvas").onclick = myTimer(); 
} 

function doTinyCircles() { 
CONTEXT.fillStyle = randomColor(); 
    for (var i = 1; i < 12; i++){ 
     for (var j = 0 ; j < i*1; j++){ 
     CONTEXT.fillStyle = randomColor(); 
     CONTEXT.rotate(Math.PI*2/(i*6)); 
     CONTEXT.beginPath(); 
     CONTEXT.arc(0,i*5,1.5,0,Math.PI*2,true); 
     CONTEXT.fill(); 
     } 
    } 
} 

Answer 1

Вы должны фактически объявить randomColor функцию и сделать doTinyCircles доступными для вашей myTimer функции.

var CANVAS; 
var CONTEXT; 
var TIMER; 

function myTimer() { 
    TIMER = setInterval("doTinyCircles();", 30); 
} 

CANVAS = document.getElementById("canvas"); 
CONTEXT = CANVAS.getContext("2d"); CONTEXT.strokeRect(0, 0, CANVAS.width, CANVAS.height); 
CONTEXT.fillRect = (0, 0, CANVAS.width, CANVAS.height); 
CONTEXT.fillStyle = "rgb(255, 0, 0)"; 
CONTEXT.translate(32, 32); 

myTimer(); 
    document.getElementById("canvas").onclick = myTimer(); 

//need to set doTinyCircles to a variable, otherwise 
//myTimer won't be able to run it. 
doTinyCircles = function doTinyCircles() { 
    for (var i = 1; i < 12; i++){ 
      for (var j = 0 ; j < i*1; j++){ 
       CONTEXT.fillStyle = randomColor(); 
       CONTEXT.rotate(Math.PI*2/(i*6)); 
       CONTEXT.beginPath(); 
         CONTEXT.arc(0,i*5,1.5,0,Math.PI*2,true); 
       CONTEXT.fill(); 
      } 
    } 
} 

randomColor = function randomColor() { 
    var red = Math.floor(Math.random() * 255); 
    var green = Math.floor(Math.random() * 255); 
    var blue = Math.floor(Math.random() * 255); 
    return "rgb(" + red + "," + green + "," + blue + ")"; 
} 

Answer 2

fillRect - это функция, вы пытаетесь получить к ней доступ, как свойство.

CONTEXT.fillRect = (0, 0, CANVAS.width, CANVAS.height); 

должен быть

CONTEXT.fillRect(0, 0, CANVAS.width, CANVAS.height); 

Хотя я до сих пор думаю, что могут возникнуть проблемы, просто изменить цвет фона (потому что вы изменить стартовую позицию рисования и делает дугу).
Может быть, div за холстом, поскольку цвет фона будет лучше.

Кроме того, здесь представлена ​​хорошая случайная функция шестнадцатеричного цвета.

function randomColor() { 
    return '#'+Math.floor(Math.random()*16777215).toString(16); 
} 

EDIT:
Вот один, который использует фон DIV для цвета фона.
http://jsfiddle.net/725aD/1/