用 JavaScript 创建画布动画，是创建一个定格图案，擦除该图案， 然后在一个新的位置重新绘制它。这听上去有很多个步骤，但是， JavaScript 可以很快地更新图形的位置，以创建一个平滑的动画。
我们使用画布和 setInterval 来绘制一个方块，并且让其缓慢地在页面上移动
-
调用了 clearRect，它在画布上清除出一个矩形区域。
因为方块移动范围是在画布里面，所以我们清除的区域是200*200，这样无论方块此时移动到哪里都会被清除。 -
间隔为30毫秒，在(0,0)处画一个2020的方块，然后清除区域内容；在(1,0)处画一个2020的方块，然后清除区域内容；然后在(2,0)处画。。。。，因为过程很平滑，所以看起来就像看动画一样。超出画布范围后回到左侧重新开始移动。
<body>
<canvas id="canvas" width="200" height="200"></canvas>>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var position = 0;
setInterval(function(){
ctx.clearRect(0,0,200,200);
ctx.fillRect(position,0,20,20);
position++;
if(position > 200){
position = 0;
}
},30);
</script>
</body>
注意ctx.fillRect(position,0,20,20);必须放在后面，不然每次都是一执行绘制方法马上执行清除方法，页面始终空白。而先清除，再绘制之后，间隔30毫秒才开始继续清除、绘制，这样才能达到动画效果。
方块大小变化的动画
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 0;
setInterval(function(){
ctx.clearRect(0,0,200,200);
ctx.fillRect(0,0,size,size);
size++;
if(size > 200){
size = 0;
}
},30);
</script>
</body>
绘制一个在页面上乱飞的蜜蜂
1，绘制蜜蜂可以构造多个圆形的组合图形
2，乱飞就是让这个组合图形随机移动
- 定义一个circle方法，根据参数 fillCircle 来绘制实心圆或者圆形边框。
- drawBee方法用于调用circle方法绘制出蜜蜂
- 创建一个update方法来随机修改米饭的x坐标和y坐标，使得蜜蜂实现在画布上随机移动
1，offset 值会给出一个在-2 到 2 之间的随机值，这是蜜蜂每次随机移动的距离大小。
2，通过确保coordinate 不会增加到200 以上或者减少 到 0 以下，从而防止蜜蜂离开画布。如果coordinate 大于200，将其设置回 200；如果 coordinate 小于 0，将其设置回 0。
- 返回了新的coordinate 值，也就是新的坐标。传入x坐标会返回新的x坐标，传入y的坐标会返回新的y坐标（分别传入是因为x方向移动距离不一定等于y方向的移动距离，体现随机的不只是移动方向还有移动距离）
coordinate += offset; 的+和=之间不允许有空格，不然报错one.html:48 Uncaught SyntaxError: Unexpected token =
完整代码如下：
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//蜜蜂起始位置
var x= 100;
var y= 100;
var circle = function(x,y,radius,fillCircle){
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI*2,false);
if(fillCircle){
ctx.fill(); //画出实心圆
}else{
ctx.stroke(); //画出圆形边框
}
};
//绘制蜜蜂
var drawBee = function(x,y){
ctx.lineWidth = 2;
ctx.strokeStyle = "Black";
ctx.fillStyle = "Gold";
//调用上面的circle函数，最后一个参数对应上面定义的fillCircle参数
//第一个圆是实心圆，代表蜜蜂身体
circle(x,y,8,true);
//在蜜蜂身体绘制一个黑色的圆边框
circle(x,y,8,false);
//在身体上绘制黑色边框的翅膀
circle(x-5,y-11,5,false);
circle(x+5,y-11,5,false);
//在最上方绘制两个眼睛
circle(x-2,y-1,2,false);
circle(x+2,y-1,2,false);
}
var update = function(coordinate) {
var offset = Math.random()*4 - 2;
// coordinate + = offset; 错误
coordinate += offset;
if(coordinate > 200){
coordinate = 200;
}
if(coordinate < 0){
coordinate = 0;
}
return coordinate;
};
setInterval(function(){
ctx.clearRect(0,0,200,200);
drawBee(x,y);
x=update(x);
y=update(y);
ctx.strokeRect(0,0,200,200);
},30);
</script>
</body>
效果图如下：
Paste_Image.png
弹跳的球（带有速度和方向）
现在，我们来制作在画布上弹跳的球。无论何时，当球碰到墙的时候， 它都会以一个角度弹回，就像是一个橡皮球一样
开始位置设置在（100，100），this.xSpeed设置为-2将会在动画的每一步中将球向左移动2个像素。 this.ySpeed设置为3使得球在每一个动画步骤中向下移动3个像素。因此， 在每一帧之间，球将会斜着向下移动（3 个像素）并向左移动（2 个像素）。
Paste_Image.png
-
向Ball原型添加draw方法绘制球，以便Ball构造方法创建的任何实例都能够使用它
-
弹跳球,我们检查球是否碰到一面墙。如果是,通过将xSpeed属性或ySpeed 属性取反（将其与-1 相乘）而更新它们。例如，如果球碰到了底部的墙，将this.ySpeed取反。因此，如果this.ySpeed是3，取反后将其变为-3。如果 this.ySpeed是-3，取反后将其设置为3。
完整代码如下：
<body>
<canvas id="canvas" width="200" height="200"></canvas>
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//球的属性，包括位置坐标和速度
var Ball = function(){
this.x=100;
this.y=100;
this.xSpeed = -2;
this.ySpeed = 3;
}
//向Ball原型添加draw方法绘制球，以便Ball构造方法创建的任何实例都能够使用它
var circle = function (x,y,radius,fillCircle){
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI*2,false);
if(fillCircle){
ctx.fill();
}else{
ctx.stroke();
}
};
Ball.prototype.draw = function(){
circle(this.x,this.y,3,true);
};
//移动球,就是根据速度改变球的坐标属性值
Ball.prototype.move = function(){
this.x += this.xSpeed;
this.y += this.ySpeed;
};
//检查球是否会与墙碰撞,如果球移动到画布边界，
//水平到达边界，让x方向速速度取反
//竖直达到边界，让y方向速度取反
Ball.prototype.checkCollision = function() {
if(this.x < 0 || this.x > 200 ){
this.xSpeed = -this.xSpeed;
}
if(this.y < 0 || this.y > 200 ){
this.ySpeed = -this.ySpeed;
}
}
//实现球的动画
var ball = new Ball();
setInterval(function(){
//清除画布
ctx.clearRect(0,0,200,200);
//绘制球体，与上面清除画布的间歇性配合平滑檫除重新绘制，达到动画效果
ball.draw();
ball.move();
ball.checkCollision();
//绘制墙，就是边框，与clearRect没有任何关系
ctx.strokeRect(0,0,200,200);
},30);
</script>
</body>
效果图如下
Paste_Image.png
网友评论