如何在HTML5 Canvas中临时更改圆圈的颜色 [英] How to change color of circle temporarily in HTML5 Canvas

问题描述

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

I am trying to build simon game using html5 canvas and pure javascript. I have managed to get the simon game UI using html5 canvas. My next step is to make the four components light up randomly. I am not sure if this is even possible with html5 canvas or probably my approach is wrong. Any hints in the right direction will be of great help. My code is as follows codepen link: 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();

推荐答案

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

Your first problem: This is just a static image.

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

You only call drawSimon() once, thus it only gets drawn once. To fix this, you need to use requestAnimationFrame or setInterval (preferably the first).

requestAnimationFrame 就像一个简单的方法调用，但是会延迟该方法，因此它与屏幕的帧速率一致。您需要从 drawSimon 内部调用 drawSimon 。

requestAnimationFrame is like a simple method call, but delays the method, so it lines up with the screen's framerate. You need to call drawSimon from inside drawSimon with this.

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（含3）之间的随机索引，并使该位置的颜色更亮。

Next you want to choose a random color and make it lighter. There's a problem with this. Your colors are all already pure colors, you can't make them brighter. You need to use darker colors (example: rgb(150, 0, 0) instead of red). Then you need to choose a random index between 0 and 3 (inclusively), and make the color in that place brighter.

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

第三步：使颜色变回来。

Third step: make the colors change back.

您可以使用一个计时器来实现。每次将颜色设置为较亮时，都可以节省时间。每帧，检查从当前时间到最后一次更改颜色之间的时间，如果超出特定限制，则将它们设置为与使用较亮的颜色相同的方式。

You could achieve this with a time counter. Each time you set a color to brighter save the time this was done. Each frame, check the time between the current time and the last time you changed to colors, and if it's over a specific limit, set them back the same way you did with the brighter colors.

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

这篇关于如何在HTML5 Canvas中临时更改圆圈的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！