The Walking Duck – Animação e movimento com HTML5+Javascript

Desta vez fiz algo mais completo com html5 + javascript. Além disso, o código está mais OO. 😀
Continue lendo

Anúncios

Animação em HTML5 + Javascript

Neste post vou mostrar como fazer de forma fácil uma simples animação direto no browser, sem flash. Para isto basta adicionar o código abaixo no código html.

<canvas id="xumbi_canvas" width="496" height="568">your browser 
don't support canvas.</canvas>

Depois, basta adicionar o código javascript abaixo:

<script lang="javascript">
<!--
var canvas;
var ctx;
var sprites=new Array();
sprites[0]="https://sergiosvieira.files.wordpress.com/2011/10/01.png";
sprites[1]="https://sergiosvieira.files.wordpress.com/2011/10/02.png";
sprites[2]="https://sergiosvieira.files.wordpress.com/2011/10/03.png" 
var index = 0;

function init() {
    canvas = document.getElementById("xumbi_canvas");
    ctx = canvas.getContext("2d");
 
    xumbi = new Image();
    xumbi.src = sprites[index];

    return setInterval(main_loop, 100);
}
 
function update(){
    if (index < 3) {
        index = index + 1;
    } else {
        index = 0;
    }
    xumbi.src = sprites[index];
}
 
function draw() {
    ctx.drawImage(xumbi,0,0);
}
 
function main_loop() {
    draw();
    update();
}
 
init();
-->
</script>

Você pode ver um exemplo de animação clicando Aqui