補間による色の変化
時間と共に色が変化していく処理の説明です。
サンプル
解説
固定の色aから色bの間を40段階に分割し、その40段階の色を0.05秒おきに色iとして表示させる方法です。
ソースコード
<html>
<head>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
var elmCv;
var ctxCv;
var iIdx = 0;
//色aの赤輝度は50、色bの赤輝度は250、段階数は40とする
var iRa = 50;
var iRb = 250;
var iMax = 40;
function sbInit() {
//キャンバスの準備
elmCv = document.getElementById('cv');
ctxCv = elmCv.getContext('2d');
//sbAnimeを0.05秒おきに呼び出し
setInterval('sbAnime()',50)
}
function sbAnime() {
//キャンバスをクリア
ctxCv.clearRect(0,0,400,200);
//色aと色bの30%の割合にある色iは計算で求める
var iRi;
iRi = iRa + (iRb - iRa) / iMax * iIdx;
//色を表示
ctxCv.fillStyle = 'rgb(255,' + iRi + ',255)';
ctxCv.fillRect(50,50,300,100);
//段階目を加算(段階数の最大値に達したら0に戻す)
iIdx = (iIdx + 1) % iMax;
}
window.onload = sbInit;
</script>
</head>
<body>
<canvas id="cv" width="400" height="200"></canvas>
</body>
</html>