關鍵事件改變背景畫布

Question

所以我想讓向下的箭頭使我的畫布變化的背景。我只是讓按鈕按下自己的工作而遇到麻煩。

另外我被告知，我將不得不有一個函數重繪所有的形狀已經在那裏在開始，以及我也堅持要改變什麼。

這是一個JSFiddle我到目前爲止，任何建議表示讚賞！

https://jsfiddle.net/u8avnky2/

var mainCanvas = document.getElementById("canvas"); 
var mainContext = mainCanvas.getContext('2d'); 

//rotate canvas 
function buttonClick() { 
    mainContext.rotate(20*Math.PI/180); 
} 


//key down event 
window.addEventListener('keydown', function(event) { 
    if (event.keyCode === 40) { 
    fillBackgroundColor(); 
    } 
}); 


function fillBackgroundColor() { 
    var colors = ["red", "green", "blue", "orange", "purple", "yellow"]; 
    var color = colors[Math.floor(Math.random()*colors.length)]; 
    var canvas = document.getElementById("canvas"); 
    var context = canvas.getContext("2d"); 
    mainContext.fillStyle = color; 
    mainContext.fillRect(0, 0, canvas.width, canvas.height); 
} 


function check() { 
    mainContext.clearRect(square.x,square.y,square.w,square.h); 
} 

var circles = new Array(); 

var requestAnimationFrame = window.requestAnimationFrame || 
          window.mozRequestAnimationFrame || 
          window.webkitRequestAnimationFrame || 
          window.msRequestAnimationFrame; 

function Circle(radius, speed, width, xPos, yPos) { 
    this.radius = radius; 
    this.speed = speed; 
    this.width = width; 
    this.xPos = xPos; 
    this.yPos = yPos; 
    this.opacity = .1 + Math.random() * .5; 

    this.counter = 0; 

    var signHelper = Math.floor(Math.random() * 2); 

    if (signHelper == 1) { 
     this.sign = -1; 
    } else { 
     this.sign = 1; 
    } 
} 

//drawing circle 
Circle.prototype.update = function() { 
    this.counter += this.sign * this.speed; 

    mainContext.beginPath(); 
    mainContext.arc(this.xPos + Math.cos(this.counter/100) * this.radius, 
        this.yPos + Math.sin(this.counter/100) * this.radius, 
        this.width, 
        0, 
        Math.PI * 2, 
        false); 

    mainContext.closePath(); 

    mainContext.fillStyle = 'rgba(255, 255, 51,' + this.opacity + ')'; 
    mainContext.fill(); 
}; 

function setupCircles() { 
    for (var i = 0; i < 25; i++) { 
     var randomX = Math.round(-200 + Math.random() * 700); 
     var randomY = Math.round(-200 + Math.random() * 700); 
     var speed = .2 + Math.random() * 3; 
     var size = 5 + Math.random() * 100; 
     var radius = 5 + Math.random() * 100; 

     var circle = new Circle(radius, speed, size, randomX, randomY); 
     circles.push(circle); 
    } 
    drawAndUpdate(); 
} 
setupCircles(); 

function drawAndUpdate() { 
    mainContext.clearRect(0, 0, 1000, 1000); 


    for (var i = 0; i < circles.length; i++) { 

     var myCircle = circles[i]; 
     myCircle.update(); 
    } 
    requestAnimationFrame(drawAndUpdate); 
} 

Answer 1

的jsfiddle：https://jsfiddle.net/CanvasCode/u8avnky2/1/

我加入稱爲顏色全局變量，所以fillBackgroundColor可以訪問該代替。

var color = "white"; 

然後在你的drawAndUpdate功能，我們只是做一個fillRect使用畫布寬度和高度color變量和它的作品。

function drawAndUpdate() { 
     mainContext.fillStyle = color; 
    mainContext.fillRect(0, 0, mainCanvas.width, mainCanvas.height); 

    for (var i = 0; i < circles.length; i++) { 

     var myCircle = circles[i]; 
     myCircle.update(); 
    } 
    requestAnimationFrame(drawAndUpdate); 
}