角度を指定してオブジェクトを動かす[cos/sin][ベクトル][canvas]

「速度」は向きを持ち、その大きさを「速さ」と呼びます。そして、向きと大きさを持つ量が「ベクトル」です。今回はその向きと大きさを指定してオブジェクトを動かしてみます。

上記デモでは、向きすなわち角度（angle）を30度、大きさ（speed）を5.0に指定してオブジェクトを動かしています。

関連ページ

デモ画面コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vector</title>

<style>
*{ margin: 0px; padding: 0px; }
#canvas { background-color: #000; }
</style>

<head>
<body>

<canvas  id="canvas" width="500" height="500">
ブラウザが対応しておりません。
</canvas>

<script>

window.addEventListener('load', draw, false);

function draw(){
    var x = 0, y = 0;
    var speed = 5.0; //速さ
    var angle = 30; //角度
    var radians = 0; //ラジアン
    var vx = 0;
    var vy = 0;
    
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    function loop() {
        ctx.clearRect(0 ,0, canvas.width, canvas.height); //キャンバス上の図形をクリアにする
        
        radians = angle * Math.PI / 180; //度をラジアンに変換
        vx = Math.cos(radians)*speed;
        vy = Math.sin(radians)*speed;

        x +=vx;
        y +=vy;
    
        ctx.beginPath();
        ctx.fillStyle = 'green';
        ctx.arc(x, y, 10, 0, Math.PI*2.0, true);
        ctx.fill();
        requestAnimationFrame(loop);
    }
       
    loop();

}

</script>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>vector</title>

<style>

*{ margin: 0px; padding: 0px; }

#canvas { background-color: #000; }

</style>

<head>

<body>

ブラウザが対応しておりません。

</canvas>

window.addEventListener('load', draw, false);

function draw(){

var x = 0, y = 0;

var speed = 5.0; //速さ

var angle = 30; //角度

var radians = 0; //ラジアン

var vx = 0;

var vy = 0;

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

function loop() {

ctx.clearRect(0 ,0, canvas.width, canvas.height); //キャンバス上の図形をクリアにする

radians = angle * Math.PI / 180; //度をラジアンに変換

vx = Math.cos(radians)*speed;

vy = Math.sin(radians)*speed;

x +=vx;

y +=vy;

ctx.beginPath();

ctx.fillStyle = 'green';

ctx.arc(x, y, 10, 0, Math.PI*2.0, true);

ctx.fill();

requestAnimationFrame(loop);

}

loop();

}

</script>

</body>

</html>

37行目
度をラジアンに変換しています。1[度]はπ／180[rad]なのでangle[度]のラジアンは下記のように求めることができます。

angle * π／180

1	angle * π／180

38・39行目
速度をX軸Y軸の各成分に分解しています。

下記の関連ページでは、角度ではなくあらかじめX、Y軸方向の各成分に速さを指定しています。

思考の葉

思考の葉

角度を指定してオブジェクトを動かす[cos/sin][ベクトル][canvas]