javascriptによる図形の制御

質問

javascriptで極小の円を書いて書いたものが、徐々に色が変化しながら大きくなり一定の大きさになると、
元の大きさに変化しながら別の色になるというのを作りたいと思っております。
色は最初がグリーンで、最大時が赤、収縮時が青としたいのですが、何卒お力をお貸し下さい。
以下は自分が途中まで考えたものですが、この考えでは不可能であれば別の方法でお教え下さい。
よろしくお願いいたします。

$('#実行ボタン名').click(function(){
var index = 0;
var timer = window.setInterval(
function(){
index++;
var canvas = document.getElementById('キャンバス名');
ctxt = canvas.getContext('2d');
if (index >= 25){
//if
//25になった時の処理
/*
ctxt.fillStyle = '色　？？？';
ctxt.arc(100, 80, ？？？, Math.PI*2, false);
ctxt.fill();
*/
}else{
ctxt.fillStyle = '色　？？？';
ctxt.arc(100, 80, 1 + index, 0, Math.PI*2, false);
ctxt.fill();
}
},
200
)

回答No.1

cero_d · ベストアンサー

kuro00kuroさんのを元に簡単に作りました。

再描画する際の注意点として下記があります。
canvasでアニメーションを行う場合は、一度キャンバスとパスをクリアして描画してあげる必要があります。
下記の処理がそれを行っております。
ctxt.clearRect(0,0,200,160);
ctxt.beginPath();

$('#testButton').click(function(){
var index = 0,
stop = 10,
canvasFlg = false,
colorList = new Array('#008000','#ff0000','#0000ff');

var canvas = document.getElementById('canvas');
var ctxt = canvas.getContext('2d');
var timer =
function(){
//canvasのクリア
ctxt.clearRect(0,0,200,160);
//パスのクリア
ctxt.beginPath();

//円の拡大・停滞・縮小判定
if (canvasFlg){
if (stop == 0) {
index--;
ctxt.fillStyle = colorList[2];
if (index == 0) {
canvasFlg = false;
}
} else {
stop--;
ctxt.fillStyle = colorList[1];
}
} else {
index++;
ctxt.fillStyle = colorList[0];
if (index == 30) {
stop = 10;
canvasFlg = true;
}
}

// 円描画
ctxt.arc(100, 80, index, 0, Math.PI*2, true);
ctxt.fill();
};
setInterval(timer, 100);
});

お礼

どちらをベストアンサーにするか悩みましたが、わかりやすい解説と自分の原型を元に回答して下さった方をお選び致しました。
本当にありがとうございました。
勉強になります。

回答No.2

nekomikekamo

徐々に色が変わるのでこんなかんじですか？

var canvas = document.getElementById('test'),
ctxt = canvas.getContext('2d');

var rmin = 1,
rmax = 25,
diff = 1,
radius = rmin;

var r = 0, g = 255, b = 0;

var dc = Math.floor(255/rmax),
dr = dc, dg = -dc, db = 0;

var timer = setInterval(function(){

canvas.width = 255;//canvas clear
ctxt.fillStyle = 'rgb(' + r +',' + g + ',' + b + ')';
ctxt.arc(100, 80, radius, 0, Math.PI*2, false);
ctxt.fill();

radius += diff;
if(radius >= rmax){
diff = -1;
db = dc;
dr = -dc;
r = 255; b = 0; g = 0;
}
if(radius <= rmin){
diff = 0;
db = 0;
dr = 0;
r = 0; b = 255; g = 0;

}

r += dr;
g += dg;
b += db;
},
200);

お礼

回答ありがとうございます。
徐々に色を変化させたかったので参考になります。
使用させていただきます。
ありがとうございました。