水平アニメーション

by webopixel

HTML

<canvas id="canvas-container" width="600" height="200"></canvas>

JavaScript

var canvas = document.querySelector('#canvas-container');
var ctx = canvas.getContext('2d');

var speed = 30;    //移動速度
var x = 0;      //X軸の位置

// ループ処理
function loop() {
    requestAnimFrame(loop);
    ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
    // ループ毎にxを加算
    x += (400 - x) / speed;
    // 丸を描画
    drawCircle(x, 100, 20, '#D0A869');
}


function drawCircle(x, y, scale, color) {
    ctx.beginPath();
    ctx.arc(x, y, scale, 0, 2*Math.PI, false);
    ctx.fillStyle = color;
    ctx.fill();
}

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();

loop();