如何在 HTML5 Canvas 中临时更改圆圈的颜色

Question

我正在尝试使用 html5 画布和纯 javascript 构建 simon 游戏。我已经设法使用 html5 画布获得了 simon 游戏 UI。我的下一步是让四个组件随机点亮。我不确定 html5 画布是否可以做到这一点，或者我的方法可能是错误的。任何正确方向的提示都会有很大帮助。我的代码如下 codepen 链接：http://codepen.io/anon/pen/QEdPRN?editors=1010

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//bigger circle
ctx.beginPath();
ctx.arc(235,230,140,0,2*Math.PI);
ctx.fillStyle = '#000';
ctx.fill();
ctx.stroke();

//smaller circle
ctx.beginPath();
ctx.arc(235,230,60,0,2*Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.stroke();

//draw the four arcs
var x = [240,240,230,230];
var y = [240,225,225,240];
var start = [0,1.5*Math.PI,1*Math.PI,0.5*Math.PI];
var end = [0.5*Math.PI,0,1.5*Math.PI,1*Math.PI];
var color = ["blue","red","green","yellow"];

var draw = function (a,b,c,d,e) {
    ctx.beginPath();
    ctx.arc(a,b,90,c,d);
    ctx.lineWidth = 50;
    ctx.strokeStyle = e;
    ctx.stroke();
}

function drawSimon() {
  for(var i=0;i<4;i++){
    draw(x[i],y[i],start[i],end[i],color[i]);
  }
}

drawSimon();

Answer 1

您的第一个问题：这只是一张静态图片。

您只调用一次drawSimon()，因此它只会被绘制一次。要解决此问题，您需要使用requestAnimationFrame 或setInterval（最好是第一个）。

requestAnimationFrame 就像一个简单的方法调用，只是延迟了方法，所以它与屏幕的帧率对齐。你需要用这个从drawSimon 内部调用drawSimon。

function drawSimon() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); //Clear the screen
    //Draw the simon here
    requestAnimationFrame(drawSimon);
}
drawSimon();

接下来，您要选择一种随机颜色并使其更亮。这有问题。你的颜色都已经是纯色了，你不能让它们更亮。您需要使用较深的颜色（例如：rgb(150, 0, 0) 而不是 red）。然后你需要在0到3（含）之间随机选择一个索引，让那个地方的颜色更亮。

var index = Math.floor(Math.random() * 4);
switch (index) {
    case 0:
        color[0] = "blue";
        break;
    case 1:
        color[0] = "red";
        break;
    case 2:
        color[0] = "green";
        break;
    case 3:
        color[0] = "yellow";
        break;
}

第三步：让颜色变回来。

您可以使用计时器来实现这一点。每次将颜色设置为更亮时，都会节省完成时间。每一帧，检查当前时间和上次更改颜色之间的时间，如果超过特定限制，请按照与更亮颜色相同的方式设置它们。

//global scope:
var lastChange = 0;

//Change a color to lighter here
lastChange = Date.now();

//Later in the code
if (Date.now() - lastChange > maxTime) {
    //Change colors back here
}