html5のCanvasを使ってアニメーションを作る4

Canvas の座標システムの変換

Canvas の座標システムは、移動できたり回転できたりします。

例えば、ctx.translate(canvas.width/2, canvas.height/2); とすることで、Canvas の左上隅を中央にもってくることが可能です。

c8

また、ctx.rotate();を利用することで、Canvas座標に角度を付けて傾けることも可能です。

c9png

Canvas座標を変換する前に save() で本来の座標を保管し、処理後は restore() で戻します。

以下は、座標システムの変換を利用した簡単なアニーメーションです。
マッチ棒がくるくる円を描いて周ります。

html 部分

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>rotate test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            #mycanvas{
                border: 1px solid #000;
            }
        </style>
    </head>
        <body>
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </body>
</html>

javascript 部分

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

var angle = 1;
var angleInRadians = angle * Math.PI / 180;


function init(){
    ctx.save();
    
    ctx.beginPath();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.moveTo(0,0);
    ctx.lineTo(100, 0);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.fillStyle = 'rgb(192, 80, 77)';
    ctx.arc(100, 0, 5, 0, Math.PI*2);
    ctx.fill();
    
    ctx.restore();
}


function update(){
    angle ++;   
    angleInRadians = angle * Math.PI / 180;
}

 function drawline(){
    //クリア
    ctx.clearRect(0,0,canvas.width,canvas.height);
    
    ctx.save();
    ctx.translate(canvas.width/2, canvas.height/2);
    ctx.rotate(angleInRadians);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 0);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.fillStyle = 'rgb(192, 80, 77)';
    ctx.arc(100, 0, 5, 0, Math.PI*2);
    ctx.fill();
    
    ctx.restore();

}

function animate(){
    update();
    drawline();
    requestAnimationFrame(animate);
}

init();
animate();