補間による移動

時間と共に座標を移動させる処理の説明です。

サンプル

解説

固定の座標点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のX座標は100、点bのX座標は300、コマ数は40とする
var iXa = 100;
var iXb = 300;
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 iXi;
    iXi = iXa + (iXb - iXa) / iMax * iIdx;
    
    //線を描画
    ctxCv.beginPath();
    ctxCv.moveTo(iXi,50);
    ctxCv.lineTo(iXi,150);
    ctxCv.stroke();
    
    //コマ目を加算（コマ数の最大値に達したら0に戻す）
    iIdx = (iIdx + 1) % iMax;
}
window.onload = sbInit;

</script>
</head>
<body>
<canvas id="cv" width="400" height="200"></canvas>
</body>
</html>

補間による移動

タグ一覧

補間による移動

サンプル

解説

ソースコード