html5キャンバスと純粋なjavascriptを使ってシモンゲームを構築しようとしています。私はhtml5キャンバスを使ってシモンゲームUIを手に入れました。次のステップは、4つのコンポーネントをランダムに点灯させることです。私はこれがhtml5キャンバスで可能なのか、おそらく私のアプローチが間違っているかどうかはわかりません。正しい方向へのヒントは大きな助けになるでしょう。 http://codepen.io/anon/pen/QEdPRN?editors=1010HTML5キャンバスで円の色を一時的に変更する方法
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();
はランダムな色を選択し、段階的なアニメーションの場合はrequestAnimationFrameを使用し、1回限りの変更の場合はタイマーを使用します。あなたはどこにいらっしゃいますか? –
ランダムな色で4つのコンポーネントを再描画するはずですか?私は一回限りの変更がsetIntervalで達成できることを知っていますが、ランダムな色を一度表示して元の色に戻す方法はわかりません。 – M00
colors配列の色を変更するたびに、 'drawSimon()'をもう一度呼び出すと、現在表示されているイメージが上書きされます。間に 'clearRect(...) 'をつけてキャンバスをクリアしたいかもしれません。 –