6.2.3_精灵表绘制器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精灵表绘制器</title>
<style>
body{
background: #ddd;
}
#canvas{
position: absolute;
top: 30px;
left: 10px;
background: #FFFFFF;
cursor: crosshair;
margin-left: 10px;
margin-top: 10px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
input{
margin-left: 15px;
}
</style>
</head>
<body>
<input id="animateButton" type="button" value="Animate" />
<canvas id="canvas" width="462" height="500"></canvas>
</body>
<script>
var Sprite = function(name,painter,behaviors){
if(name !== undefined){ this.name = name; }
if(painter !== undefined){ this.painter = painter; }
this.top = 0;
this.left = 0;
this.width = 10;
this.height = 10;
this.velocityX = 0;
this.velocityY = 0;
this.visible = true;
this.animating = false;
this.behaviors = behaviors || [];
}
Sprite.prototype = {
paint:function(context){
if(this.painter !== undefined && this.visible){
this.painter.paint(this,context);
}
},
update:function(context,time){
for(var i=0;i<this.behaviors.length;i++){
this.behaviors[i].execute(this,context,time);
}
}
}
</script>
<script>
var SpriteSheetPainter = function(cells){
this.cells = cells || [];
this.cellIndex = 0;
}
SpriteSheetPainter.prototype = {
advance:function(){
if(this.cellIndex == (this.cells.length-1)){
this.cellIndex = 0;
}else{
this.cellIndex++;
}
},
paint:function(sprite,context){
var cell = this.cells[this.cellIndex];
context.drawImage(spritesheet,cell.x,cell.y,cell.w,cell.h,sprite.left,sprite.top,cell.w,cell.h);
}
}
</script>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var animateButton = document.getElementById('animateButton');
var spritesheet = new Image();
var runnerCells =[
{x:0,y:0,w:47,h:64},
{x:55,y:0,w:44,h:64},
{x:107,y:0,w:39,h:64},
{x:150,y:0,w:46,h:64},
{x:208,y:0,w:49,h:64},
{x:265,y:0,w:46,h:64},
{x:320,y:0,w:42,h:64},
{x:380,y:0,w:35,h:64},
{x:425,y:0,w:35,h:64}
];
var sprite = new Sprite('runner',new SpriteSheetPainter(runnerCells));
var interval;
var lastAdvance = 0;
var paused = false;
var pageFlip_interval = 100;
spritesheet.src = 'img/running-sprite-sheet.png';
spritesheet.onload = function(){
context.drawImage(spritesheet,0,0);
}
sprite.left = 200;
sprite.top = 100;
context.strokeStyle = 'llightgray';
context.lineWidth = 0.5;
drawBackground();
animateButton.onclick = function(){
if(animateButton.value === 'Animate'){
startAnimation();
}else{
pauseAnimation();
}
}
function startAnimation(){
animateButton.value = 'Pause';
paused = false;
window.requestAnimationFrame(animate);
}
function pauseAnimation(){
animateButton.value = 'Animate';
paused = true;
}
function animate(time){
if(!paused){
context.clearRect(0,0,canvas.width,canvas.height);
drawBackground();
context.drawImage(spritesheet,0,0);
if(time -lastAdvance >pageFlip_interval ){
sprite.painter.advance();
lastAdvance = time;
}
sprite.paint(context);
window.requestAnimationFrame(animate);
}
}
function drawBackground(){
context.save();
context.shadowColor = undefined;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 0;
var step_y = 12;
var left_margin = step_y*4;
var top_margin = 64;
var i = canvas.height;
context.strokeStyle = 'lightgray';
context.lineWidth = 0.5;
while(i>top_margin){
context.beginPath();
context.moveTo(0,i);
context.lineTo(canvas.width,i);
context.stroke();
i-=step_y;
}
context.restore();
}
</script>
</html>
![这里写图片描述](https://img-blog.csdn.net/20170527133700167?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvanVuX3N1bl9zaGluZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)