HTML5 캔버스에서 원의 색상을 임시 변경하는 방법

Question

html5 canvas와 pure javascript를 사용하여 사이먼 게임을 만들려고합니다. html5 캔버스를 사용하여 사이먼 게임 UI를 얻을 수있었습니다. 다음 단계는 4 개의 구성 요소를 무작위로 켜는 것입니다. 이것이 html5 캔버스에서 가능할 지 모르겠다. 아마도 내 접근 방식이 잘못되었을 것이다. 올바른 방향의 힌트는 큰 도움이 될 것입니다. 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

첫 번째 문제 :이 그냥 정적 이미지입니다 codepen 링크를 다음과 같이 내 코드입니다.

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

다음으로 임의의 색상을 선택하고 더 밝게 만들고 싶습니다. 이 문제가 있습니다. 당신의 색은 모두 이미 순수한 색이며, 더 밝게 만들 수는 없습니다. 어두운 색을 사용해야합니다 (예 : red 대신 rgb(150, 0, 0)). 그런 다음 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; 
} 

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 
}