键盘控制小球移动
众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在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坐标，默认为10this.y=y||10;//圆球的y坐标，默认为10this.radius=radius||10;//圆球的半径，默认为10this.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="/js/lib/kinetic-v5.0.1.min.js"></script><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);//tweensvarleftEyeTween=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>观看演示
