今天小编跟大家讲解下有关利用HTML5 Canvas制作键盘及鼠标动画的实例分享 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关利用HTML5 Canvas制作键盘及鼠标动画的实例分享 的相关资料，希望小伙伴们看了有所帮助。
键盘控制小球移动
众所周知 我们所看到的动画实际上就是一系列静态画面快速切换 从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后 在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除 然后在另外一个位置重新绘制 如此反复 让静态图形按照一定的轨迹进行移动 就可以产生动画效果了。
下面 我们在canvas上绘制一个实心小球 然后用键盘上的方向键控制小球的移动 从而产生动态效果。示例代码如下：
Javascript Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>html5canvas绘制可移动的小球入门示例</title> </head> <bodyonkeydown="moveBall(event)"> <!--添加canvas标签 并加上红色边框以便于在页面上查看--> <canvasid="myCanvas"width="400px"height="300px"style="border:1pxsolidred;"> 您的浏览器不支持canvas标签。 </canvas> <scripttype="text/javascript"> //获取Canvas对象(画布) varcanvas=document.getElementById("myCanvas"); //表示圆球的类 functionBall(x,y,radius,speed){ this.x=x||10;//圆球的x坐标 默认为10 this.y=y||10;//圆球的y坐标 默认为10 this.radius=radius||10;//圆球的半径 默认为10 this.speed=speed||5;//圆球的移动速度 默认为5 //向上移动 this.moveUp=function(){ this.y-=this.speed; if(this.y<this.radius){ //防止超出上边界 this.y=this.radius; } }; //向右移动 this.moveRight=function(){ this.x+=this.speed; varmaxX=canvas.width-this.radius; if(this.x>maxX){ //防止超出右边界 this.x=maxX; } }; //向左移动 this.moveLeft=function(){ this.x-=this.speed; if(this.x<this.radius){ //防止超出左边界 this.x=this.radius; } }; //向下移动 this.moveDown=function(){ this.y+=this.speed; varmaxY=canvas.height-this.radius; if(this.y>maxY){ //防止超出下边界 this.y=maxY; } }; } //绘制小球 functiondrawBall(ball){ if(typeofctx!="undefined"){ ctx.beginPath(); ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false); ctx.fill(); } } //清空canvas画布 functionclearCanvas(){ if(typeofctx!="undefined"){ ctx.clearRect(0,0,400,300); } } varball=newBall(); //简单地检测当前浏览器是否支持Canvas对象 以免在一些不支持html5的浏览器中提示语法错误 if(canvas.getContext){ //获取对应的CanvasRenderingContext2D对象(画笔) varctx=canvas.getContext("2d"); drawBall(ball); } //onkeydown事件的回调处理函数 //根据用户的按键来控制小球的移动 functionmoveBall(event){ switch(event.keyCode){ case37://左方向键 ball.moveLeft(); break; case38://上方向键 ball.moveUp(); break; case39://右方向键 ball.moveRight(); break; case40://下方向键 ball.moveDown(); break; default://其他按键操作不响应 return; } clearCanvas();//先清空画布 drawBall(ball);//再绘制最新的小球 } </script> </body> </html>请使用支持html5的浏览器打开以下网页以查看实际效果(使用方向键进行移动)：使用canvas绘制可移动的小球。
小丑笑脸只需要了解很少的几个API 然后使用需要的动画参数 就能制作出这个有趣又能响应你的动作的Web动画。第一步 画五官
这个小丑没有耳朵和眉毛 所以只剩下三官 但它的两个眼睛我们要分别绘制 所以一共是四个部分。下面先看看代码。
绘制左眼的代码
Javascript Code复制内容到剪贴板 varleftEye=newKinetic.Line({ x:150, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 });绘制右眼的代码
Javascript Code复制内容到剪贴板 varrightEye=newKinetic.Line({ x:sw-250, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 });绘制鼻子的代码
Javascript Code复制内容到剪贴板 varnose=newKinetic.Line({ points:[240,280,sw/2,300,sw-240,280], tension:0.5, closed:true, stroke:'white', strokeWidth:10 });绘制嘴巴的代码
Javascript Code复制内容到剪贴板 varmouth=newKinetic.Line({ points:[150,340,sw/2,380,sw-150,340,sw/2,sh], tension:0.5, closed:true, stroke:'red', strokeWidth:10 });你会不会觉得很失望 原来就这么简单几行代码。没错 就是这么简单 相信你对自己能成为一名Web游戏动画程序员开始有信心了!
简单讲解一下上面的代码。Kinetic就是我们使用的js工具包。在页面的头部 我们需要这样引用它：
Javascript Code复制内容到剪贴板 varmouth=newKinetic.Line({ points:[150,340,sw/2,380,sw-150,340,sw/2,sh], tension:0.5, closed:true, stroke:'red', strokeWidth:10 });其它几个分别是几个关键点 线条弹性 颜色 宽度等。这些都很容易理解。
第二步 让图动起来
这个动画之所以能吸引人 是因为它能响应你的鼠标动作 和用户有互动 这是一个成功的动画最关键的地方。如果你仔细观察 这个小丑五官的变化只是形状的变化 眼睛变大 嘴巴变大 鼻子变大 但特别的是这个变化不是瞬间变化 而是有过渡性的 这里面有一些算法 这就是最让人发愁的地方。幸运的是 这算法技术都非常的成熟 不需要我们来思考 在这些动画引擎库里都把这些技术封装成了非常简单方便的接口。下面我们来看看如何让动起来。
左眼的动画
Javascript Code复制内容到剪贴板 varleftEyeTween=newKinetic.Tween({ node:leftEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] });右眼的动画
Javascript Code复制内容到剪贴板 varrightEyeTween=newKinetic.Tween({ node:rightEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] });鼻子的动画
Javascript Code复制内容到剪贴板 varnoseTween=newKinetic.Tween({ node:nose, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[220,280,sw/2,200,sw-220,280] });嘴巴的动画
Javascript Code复制内容到剪贴板 varmouthTween=newKinetic.Tween({ node:mouth, duration:1, easing:Kinetic.Easings.ElasticEaseOut, points:[100,250,sw/2,250,sw-100,250,sw/2,sh-20] });这些代码非常的简单 而且变量名能自释其意。稍微有点经验的程序员想看懂这些代码应该不难。基本每段代码都是让你提供一些点 指定动画动作的衰退模式和持续时间。
完整的动画代码
Javascript Code复制内容到剪贴板 <!DOCTYPEHTML> <html> <head> <style> body{ margin:0px; padding:0px; } #container{ background-color:black; } </style> </head> <body> <divid="container"></div> <scriptsrc=http://xyrl.com/skin/7ke/image/nopic.gif>cript> <scriptdefer="defer"> varsw=578; varsh=400; varstage=newKinetic.Stage({ container:'container', width:578, height:400 }); varlayer=newKinetic.Layer({ y:-30 }); varleftEye=newKinetic.Line({ x:150, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 }); varrightEye=newKinetic.Line({ x:sw-250, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 }); varnose=newKinetic.Line({ points:[240,280,sw/2,300,sw-240,280], tension:0.5, closed:true, stroke:'white', strokeWidth:10 }); varmouth=newKinetic.Line({ points:[150,340,sw/2,380,sw-150,340,sw/2,sh], tension:0.5, closed:true, stroke:'red', strokeWidth:10 }); layer.add(leftEye) .add(rightEye) .add(nose) .add(mouth); stage.add(layer); //tweens varleftEyeTween=newKinetic.Tween({ node:leftEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] }); varrightEyeTween=newKinetic.Tween({ node:rightEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] }); varnoseTween=newKinetic.Tween({ node:nose, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[220,280,sw/2,200,sw-220,280] }); varmouthTween=newKinetic.Tween({ node:mouth, duration:1, easing:Kinetic.Easings.ElasticEaseOut, points:[100,250,sw/2,250,sw-100,250,sw/2,sh-20] }); stage.getContainer().addEventListener('mouseover',function(){ leftEyeTween.play(); rightEyeTween.play(); noseTween.play(); mouthTween.play(); }); stage.getContainer().addEventListener('mouseout',function(){ leftEyeTween.reverse(); rightEyeTween.reverse(); noseTween.reverse(); mouthTween.reverse(); }); </script> </body> </html>观看演示
来源：爱蒂网
