HTML5 canvas 2d / JavaScript

Zielony Smok - logo witryny

Animacja w miejscu: smutna żaba

Ta przeglądarka nie obsługuje canvas

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content="HTML5 canvas - animacja HTML"/>
    <meta name="keywords" content="HTML5, canvas, animacja HTML">
    <title>HTML5 canvas: animacja HTML5 + JS</title>
</head>
<body>
<section>
    <h2 class="derby">Animacja w miejscu: smutna żaba</h2>
    <canvas id="cv" width="454" height="567">Ta przeglądarka nie obsługuje canvas</canvas>
<script>
	var path = new Array();
	path[0] = "zaby/zaba-smut_01.gif";
	path[1] = "zaby/zaba-smut_02.gif";
	path[2] = "zaby/zaba-smut_03.gif";
	path[3] = "zaby/zaba-smut_04.gif";
	path[4] = "zaby/zaba-smut_05.gif";
	path[5] = "zaby/zaba-smut_06.gif";
	path[6] = "zaby/zaba-smut_07.gif";
	path[7] = "zaby/zaba-smut_08.gif";
	path[8] = "zaby/zaba-smut_09.gif";
	path[9] = "zaby/zaba-smut_10.gif";
	path[10] = "zaby/zaba-smut_11.gif";
	path[11] = "zaby/zaba-smut_12.gif";
	path[12] = "zaby/zaba-smut_13.gif";
	var cv = null;
    var ctx = null;
    var img = document.createElement("img");
    var currImage = 0;
    var revealTimer = null;
	window.onload = function(){
	   cv = document.getElementById('cv');
       ctx = cv.getContext('2d');
       img.setAttribute('width','454');
       img.setAttribute('height','567');
       setInterval(swapImage,120);
    };
    function swapImage() {
       img.setAttribute('src', path[currImage++]);
       img.onload = function(){
         if(currImage >= path.length){
            currImage = 0;
         }
       ctx.clearRect(0,0,454,567);
       ctx.drawImage(img,0,0,454,567);
       }
   };
</script>
</section>
</body>
</html>