canvas人物动画

如图所示，小人在一直走动，并且点击上下左右时，会改变人走动的方向

源图片：

源代码：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>面向对象</title><script src="js/zxj.js" type="text/javascript"></script>
</head>
<body><div id="container"><canvas id="cavsElem">你的浏览器不支持canvas</canvas></div><button id="btn-dir-left">←</button><button id="btn-dir-right">→</button><button id="btn-dir-up">↑</button><button id="btn-dir-down">↓</button><script type="text/javascript">(function(){var canvas=document.getElementById('cavsElem');// var ctx=canvas.getContext('2d');var ctx=canvas.getContext('2d');canvas.width=600;canvas.height=600;canvas.style.border="1px solid #000";var s = new Sprite({x: 200,y: 200,w: 40*4,h: 65*4,speed: 4,w0: 40,h0: 65,imgSrc: 'imgs/gameImgs/DMMban.png'}); //渲染 动画s.render(ctx);var buttons=document.getElementsByTagName('button');buttons[0].οnclick=function(){s.changeDirection('left');}buttons[1].οnclick=function(){s.changeDirection('right');}buttons[2].οnclick=function(){s.changeDirection('up');}buttons[3].οnclick=function(){s.changeDirection('down');}}());</script>
</body>
</html>

javascript代码如下：js.js

 //封装对象// 属性：width,height,// 行为：render,changeDirectionfunction Sprite(option){this._init(option);}Sprite.prototype={_init:function(option){this.imgSrc=option.imgSrc;this.x=option.x===0?0:option.x;this.y=option.y===0?0:option.y;//canvas上显示的款宽度和高度this.w=option.w||40;this.h=option.h||65;//裁剪后的宽高this.w0=option.w0||40;this.h0=option.h0||65;this.dirIndex=0;this.speed=option.speed||10;},//画图render:function(ctx){var img=new Image();img.src=this.imgSrc;var that=this;img.οnlοad=function(){var i=0;setInterval(function(){ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);//ctx就是传递过来的上下文// ctx.canvas.width=ctx.canvas.width;ctx.drawImage(img,that.w0*i,that.h0*that.dirIndex,that.w0,that.h0,that.x,that.y,that.w,that.h);i++;i=i%4;},1000/that.speed);}},changeDirection:function(dir){if(dir=='left'){this.dirIndex=1;}else if(dir=='right'){this.dirIndex=2;}else if(dir=='up'){this.dirIndex=3;}else{this.dirIndex=0;}}};

canvas人物动画—走路相关推荐

怎么把人物模型走路、跑步动画拼接起来
怎么把人物模型走路.跑步动画拼接起来 3dmax中一个人物模型从站着,走路,起跑,跑步需要很多步骤,一帧一帧开动画太过费劲.下面我们介绍怎么调用现成的动画进行拼接. 让一个角色模型动起来需要为模型添加 ...
7-2 使用canvas绘制动画人物
将一张长图上的人物,使drawImage方法裁切出来,并绘制在canvas画布上.开启定时器,每隔50毫秒裁切并绘制一个人物的帧动作,当人物动作为最后一帧时,切换至第一帧,实现人物动画效果. 1.1 ...
flash人物原地走路_Flash动画的图形元件实例-Q版人物侧面行走
对于刚入门者而言,学会了基本图形的绘制之后,如何应用软件的各种动画补间功能,制作出具有表现力的动画,就需要更进一阶的知识技能了:那么,设计制作一个卡通人物的行走效果,如何从没有头绪的任务到变成有通用公 ...
unity人物旋转移动代码_游戏诞生之日02 - 美术篇快速制作人物动画
在上一篇<游戏诞生之日01 - 美术篇快速搭建和渲染游戏的第一个场景>里,我们得到了一个静态渲染的游戏场景. 接下来我们需要加入人物动画,为游戏注入活力. 第五块拼图 - 动画素材从哪里 ...
html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
原标题:9款用HTML5/CSS3制作的动物.人物动画今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. ...
html 动物特效,分享9款用HTML5/CSS3制作的动物人物动画，
分享9款用HTML5/CSS3制作的动物人物动画, 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示源码下载 2.HTML5 Canv ...
9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分 ...
分享9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分 ...
用html和css做动态动物,分享9款用HTML5/CSS3制作的动物人物动画
1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 2.HTML5 Canvas头发飘逸动画很酷的HTML5动画 HTML5 Canvas动画非常 ...

canvas人物动画—走路

canvas人物动画—走路相关推荐

最新文章

热门文章