（21）HTML5-动画小剧场

来源：互联网发布：js 向下查找dom 编辑：程序博客网时间：2024/04/28 21:05

在游戏设计中有一种让动画角色动起来的动画技术称为”sprite“，也就是角色表。角色表是把一系列角色连续动作的图片排序在一起，拼成一张完整的大图片。再接着通过程序控制，快速连续的播放每个窗口的动作，就能实现角色动画的效果，其概念与gif动画原理相同。在这里使用drawimage（）与setInterval两个函数来设计一个会跳舞的熊喵动画小剧场。

首先在HTML的部分加入<audio>标签，来置入背景音乐。

<audio src="music.mp3" id="BG" hidden="true" autoplay="true" loop="true"></audio>

接下来进入javascript的部分，先行声明程序中会使用到的变量。变量count代表当前要显示第几个角色的内容，从角色表中知道熊喵的跳舞动作被分解为9张图片。变量x和变量y代表熊喵在画面出现的坐标位置。

var count=0,x=400,y=180;

再来布置游戏场景，分别加载背景（background），熊喵（sprite），画布（canvas）。

//加载背景图片var background=new Image();background.src="6-4/background.png";//加载人物图片var sprite=new Image();sprite.src="6-4/sprite.png";//创建画布var canvas=document.createElement("canvas");document.body.appendChild(canvas);//调整画布的大小canvas.width=1440;canvas.height=485;

目前已经完成了画面的基础配置，接下来通过drawImage（）函数将背景与熊喵描绘到画布。由于不断调用这个部分，因此设计一个自定义函数draw（）实现这个部分，先声明成2d环境，并将背景图通过drawImage（）描绘到画布中。

function draw(){var context=canvas.getContext("2d");context.drawImage(background,0,0);//略}

描绘完背景后，接着处理熊喵的描绘。因此每次要描绘的熊喵范围不同，所以设计一个switch机制，通过count不断加一，控制drawImage（）当前所要描绘的范围，这里使用drawImage（）因为其具有裁剪功能，所以需要输入更多的参数。

资源下载链接

<html> <head>     <meta charset="utf-8"/>     <style>     </style> </head> <body>    <audio src="6-4/music.mp3" id="BG" hidden="true" autoplay="true" loop="true"></audio>    <script >     var count=0,x=400,y=180;     var background=new Image();     background.src = "6-4/background.png";     var sprite=new Image();     sprite.src="6-4/sprite.png";     var canvas=document.createElement("canvas");     document.body.appendChild(canvas);     canvas.width=1440;     canvas.height=485;     function draw(){        //context.绘制图片(图片或画布或影片, 开始裁切的x位置, 开始裁切的y位置, 裁切范围的宽, 裁切范围的高, 绘制图片的x位置, 绘制图片的y位置, 图片宽, 图片高)        var context=canvas.getContext("2d");        context.drawImage(background,0,0);        switch(count){            case 0:            context.drawImage(sprite,0,0,170,172,x,y,170,172);            count++;            break;            case 1:            context.drawImage(sprite,170.33,0,170,172,x,y,170,172);            count++;            break;            case 2:            context.drawImage(sprite,340.66,0,170,172,x,y,170,172);            count++;            break;            case 3:            context.drawImage(sprite,510.99,0,170,172,x,y,170,172);            count++;            break;            case 4:            context.drawImage(sprite,681.33,0,170,172,x,y,170,172);            count++;            break;            case 5:            context.drawImage(sprite,851.66,0,170,172,x,y,170,172);            count++;            break;            case 6:            context.drawImage(sprite,1022,0,170,172,x,y,170,172);            count++;            break;            case 7:            context.drawImage(sprite,1192.33,0,170,172,x,y,170,172);            count++;            break;            case 8:            context.drawImage(sprite,1362.66,0,170,172,x,y,170,172);            count=0;            break;        }     }     window.onload=setInterval(draw,250);     </script> </body></html>

1 0