座標の中間の求め方

2つの座標の中間を求める方法の説明です。

サンプル

解説

X座標が100である点aと、X座標が乱数（0～399）である点bがあった場合、点aと点bの間を10コマに分割し、そのうち点a寄りの3コマ目の位置を点iとして求める方法です。

以下のような計算で求められます。

点i = 点a + (点b - 点a) / コマ数 * コマ目

点bから点aを引けば、二つの座標の距離が求められます。
その距離をコマ数で割れば1コマあたりの距離が求められます。
1コマあたりの距離をコマ目でかければ、指定したコマ目が点aからどれくらいの距離にあるのか求められます。
そのようにして求めた距離を点aに足すことで、指定したコマ目の位置が求められます。

ソースコード

<html>
<head>
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">

var elmCv;
var ctxCv;
function sbInit() {
    //キャンバスの準備
    elmCv = document.getElementById('cv');
    ctxCv = elmCv.getContext('2d');
    
    //sbAnimeを1秒おきに呼び出し
    setInterval('sbAnime()',1000)
}
function sbAnime() {
    //キャンバスをクリア
    ctxCv.clearRect(0,0,400,200);
    
    //点aのX座標は100、点bのX座標は乱数で求める
    var iXa,iXb
    iXa = 100;
    iXb = Math.random() * 400;
    
    //点aと点bの30%の位置にある点iは計算で求める
    var iXi;
    iXi = iXa + (iXb - iXa) / 10 * 3;
    
    //線を描画
    ctxCv.beginPath();
    ctxCv.moveTo(iXa,50);
    ctxCv.lineTo(iXa,150);
    ctxCv.moveTo(iXb,50);
    ctxCv.lineTo(iXb,150);
    ctxCv.moveTo(iXi,80);
    ctxCv.lineTo(iXi,120);
    ctxCv.stroke();
}
window.onload = sbInit;

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

座標の中間の求め方

タグ一覧

座標の中間の求め方

サンプル

解説

ソースコード