Question

我正在尝试使用html5 canvas和纯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而不是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; }）。然后你需要选择0到3之间的随机索引（包括），并使那个地方的颜色更亮。

//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
}

第三步：改变颜色。

你可以通过时间计数器实现这一目标。每次将颜色设置为更亮时，请保存完成此操作的时间。每一帧，检查当前时间和最后一次更改为颜色之间的时间，如果超过特定限制，请将其设置为与更亮颜色相同的方式。

{{1}}

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

1 个答案: