更改背景画布的按键事件

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/

我在全局范围内添加了一个名为 color 的变量，因此 fillBackgroundColor 可以访问它。

var color = "white";

然后在您的 drawAndUpdate 函数中，我们只需使用画布宽度和高度对 color 变量执行 fillRect 即可。

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);
}