键盘控制小球移动

众所周知，我们所看到的动画实际上就是一系列静态画面快速切换，从而让肉眼因视觉残像产生了「画面在活动」的视觉效果。明白了这一点后，在canvas上绘制动画效果就显得比较简单了。我们只需要将某个静态图形先清除，然后在另外一个位置重新绘制，如此反复，让静态图形按照一定的轨迹进行移动，就可以产生动画效果了。

下面，我们在canvas上绘制一个实心小球，然后用键盘上的方向键控制小球的移动，从而产生动态效果。示例代码如下：

JavaScript Code复制内容到剪贴板

html>

html5 canvas绘制可移动的小球入门示例

您的浏览器不支持canvas标签。

//获取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.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.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);//再绘制最新的小球

}

请使用支持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复制内容到剪贴板

HTML>

body {

margin: 0px;

padding: 0px;

}

#container {

background-color: black;

}

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();

});

观看演示