<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="position:absolute;top:50px;left:50px;"></div>
<canvas id="canvas" width="80" height="98"></canvas>
<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasApp(){
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext('2d'); var tileSheet=new Image();
tileSheet.addEventListener('load',eventShipLoaded,false);
tileSheet.src="2.png";
var animationFrames=[1,2,3,4];
var frameIndex=0;
function eventShipLoaded(){
startUp();
}
function drawScreen(){
context.fillStyle="white";
context.fillRect(0,0,500,500); var sourceX=Math.floor(animationFrames[frameIndex]%4)*64;
var sourceY=Math.floor(animationFrames[frameIndex]%4)*64; context.drawImage(tileSheet,sourceX,sourceY,64,64,0,0,64,64); frameIndex++;
if(frameIndex==animationFrames.length){
frameIndex=0;
}
}
function startUp(){
setInterval(drawScreen, 300);
}
}
</script>
</body>
</html>
