HTML5 Canvas Animasyon

HTML5 Canvas kullanarak bir animasyon oluşturmak için tarayıcımızın animasyonumuz için en uygun FPS’yi belirlemesini sağlayan requestAnimFrame i kullanabiliriz. Her animasyon karesi için, canvas üzerindeki öğeleri güncelleyebilir, tuvali temizleyebilir, tuvali yeniden çizebilir ve ardından başka bir animasyon çerçevesi talep edebiliriz.

Çıktı:

Kod:


<canvas id="canvas" width="578" height="200"></canvas>
<script>
    window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
        window.setTimeout(callback, 1000 / 60); 
    };
    })(); // tarayıcının animasoynu tazeleme hızı
    function init()
    {
    //kurucu işlemleri 
    window.requestAnimFrame(draw);
    }

    function draw() {
    if(newX>400) newX=0;
    newX ++;
    if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
        myRectangle.x = newX;
    }
    // temizleme
    context.clearRect(0, 0, canvas.width, canvas.height);

    drawRectangle(myRectangle, context);

        window.requestAnimationFrame(draw);//recursive kullanım
    }

    init();

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var newX=0;
    var myRectangle = {
        x: 0,
        y: 75,
        width: 100,
        height: 50,
        borderWidth: 5
    };

    /*cizim*/
    function drawRectangle(myRectangle, context) {
        context.beginPath();
        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = myRectangle.borderWidth;
        context.strokeStyle = 'black';
        context.stroke();
    }
</script>

window.requestAnimFrame = (function(callback) {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})(); // tarayıcının animasoynu tazeleme hızı

function init()

{

//kurucu işlemleri

window.requestAnimFrame(draw);

}

function draw() {

if(newX>400) newX=0;

newX ++;

if(newX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {

myRectangle.x = newX;

}

// temizleme

context.clearRect(0, 0, canvas.width, canvas.height);

drawRectangle(myRectangle, context);

window.requestAnimationFrame(draw);//recursive kullanım

}

init();

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

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

var newX=0;

var myRectangle = {

x: 0,

y: 75,

width: 100,

height: 50,

borderWidth: 5

};

/*cizim*/

function drawRectangle(myRectangle, context) {

context.beginPath();

context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

context.fillStyle = '#8ED6FF';

context.fill();

context.lineWidth = myRectangle.borderWidth;

context.strokeStyle = 'black';

context.stroke();

}

</script>

Kaynak:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

https://www.kirupa.com/html5/creating_simple_html5_canvas_animation.htm

EtiketlerHTML5 Canvas Dersleri HTML5 Canvas Örnekleri

HTML5 Canvas Animasyon

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap