HTML5キャンバスで円の色を一時的に変更する方法

Question

html5キャンバスと純粋な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()を1回呼び出すだけで、1度だけ描画されます。これを修正するには、​​またはsetInterval（好ましくは最初のもの）を使用する必要があります。

​​は、単純なメソッド呼び出しと似ていますが、メソッドを遅らせるので、画面のフレームレートと並んでいます。この場合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 
}