Canvas 动画之跳动的小球

发表于 | 分类于

Canvas 是H5的新标签，作用就好比Ps的画布层一样，可以在上面绘制想要的图案，也可以直接导入一张图片到画布上面。

除了绘制图案外，还可以使用Javascript在上面产生动画效果。

下面来编写一个模拟垂直下落的小球动画效果。

首先在页面中插入一个Canvas的标签，Id为“canvas”。

1
<canvas id="canvas"></canvas>

下面使用Js获取元素对象，并创建好Canvas实例，以及设置好画布的大小。

1
2
3
4
5
6
7
var canvas = document.getElementById('canvas');
canvas.width = 500;
canvas.height = 150;

if (canvas.getContext) {
	var context = canvas.getContext('2d');
}

使用 setInterval 方法来绘制动画，时间间隔为30ms。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var vx = 10,
	vy = -10,
	gravity = 1;
var posX = 30,
	posY = 80;
setInterval(function() {
	context.fillStyle = "white";
	context.fillRect(0,0,canvas.width, canvas.height);
	posX += vx;
	posY += vy;
	if (posY > canvas.height * 0.75) {
		vy *= -0.6;
		vx *= 0.75;
		posY = canvas.height * 0.75;
	}
	vy += gravity;
	context.beginPath();
	context.fillStyle = "black";
	context.arc(posX, posY, 10, 0, Math.PI*2, true); 
	context.closePath();
	context.fill();
}, 30);

实验室传送门