Question

所以我试图让向下箭头使画布的背景发生变化。我只是按下按钮才能自行工作。

另外我被告知我必须有一个功能重绘一开始就已存在的所有形状，我也坚持要改变什么。

这是我到目前为止所做的JSFiddle，任何建议都表示赞赏！

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

按键事件以更改背景画布

1 个答案: