<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="position: absolute;top:50px;left:50px;">
<canvas id="canvas" width="500" height="500">
your browser does not support HTML5 Canvas.
</canvas>
</div>
<script>
window.addEventListener('load',eventWindowLoaded,false);
function eventWindowLoaded(){
canvasApp();
}
function canvasSupport(){
return !!document.createElement("text").getContext;
}
function canvasApp(){
if(!canvasSupport){
return;
}else{
var theCanvas=document.getElementById("canvas");
var context=theCanvas.getContext("2d");
}
var tileSheet=new Image();
tileSheet.src='images/tanks_sheet.png';
tileSheet.addEventListener('load',eventShipLoaded,false);
// 在画布上移动
var dx=0;
var dy=-1;
// 将会在拼图左上角的拼版坐标
var x=50;
var y=500;
var animationFrames=[1,2,3,4,5,6,7,8];
var frameIndex=0;
function eventShipLoaded(){
startUp();
}
function drawScreen(){
context.fillStyle="#aaaaaa";
context.fillRect(0,0,500,500);
x=x+dx;
y=y+dy;
var sourceX=Math.floor(animationFrames[frameIndex]%8)*32;
var sourceY=Math.floor(animationFrames[frameIndex]/8)*32;
context.drawImage(tileSheet,sourceX,sourceY,32,32,x,y,32,32);
frameIndex++;
if(frameIndex==animationFrames.length){
frameIndex=0;
}
}
function startUp(){
setInterval(drawScreen,100);
}
}
</script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-1299835.html
