1. 一个矩形横穿canvas
function moveRect() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var position = 0;
setInterval(function () {
ctx.clearRect(0, 0, 200, 200);
ctx.fillRect(position, 2, 20, 20);
position++;
if (position > 200) {
position = 0;
}
}, 30);
}
重点是这两个函数:
clearRect( ) // 清除canvas上的内容
setInterval( ) // 定时重绘
本章所有的例子都是基于这个方法。定时清除canvas,重绘。
setInterval 的最后一个参数是30,也就是说,30ms重绘一次,差不多每秒更新33帧画面。
2. 缩放矩形
function animateSizeOfSquare() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var size = 0;
var reverse = false;
setInterval(function () {
ctx.clearRect(0, 0, 200, 200);
ctx.fillRect(0, 0, size, size);
if (reverse)
size--;
else
size++;
if (size > 200 || size < 0) {
reverse = !reverse;
}
}, 30);
}
3. 飞行的蜜蜂
在canvas上画一只蜜蜂
, 用setInterval定时重绘,模拟蜜蜂的飞行。
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(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;
if (coordinate > 200) {
coordinate = 200;
}
if (coordinate < 0) {
coordinate = 0;
}
return coordinate;
};
3.3. 定时绘制
function animateBee() {
var x = 100;
var y = 100;
setInterval(function () {
ctx.clearRect(0, 0, 200, 200);
drawBee(x, y);
x = update(x);
y = update(y);
ctx.strokeRect(0, 0, 200, 200);
}, 30);
}
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
animateBee();
4. 弹球
多年前,用的一个Nokia手机上就有个类似的游戏,下面有块板儿接这个球
貌似挺复杂哈。沿斜线运动、碰撞检测等等,怎么做呢?书上给的代码特简洁,特清晰,而且是用面向对象的方法。值得把它背下来。
背代码? 嗯。貌似挺傻的哈。还真的要背代码,把一些好的代码默写几遍,背下来。把时间浪费在美好的事物上。
4.1 定义小球的构造函数
var Ball = function () {
this.x = 100;
this.y = 100;
this.xSpeed = -2; // 横向移动速度,每次向左移动2个像素
this.ySpeed = 3; // 纵向移动速度,每次向下移动3个像素
};
4.2 画小球,和第三个例子(画蜜蜂)中的circle函数相同
Ball.prototype.draw = function () {
circle(this.x, this.y, 3, true);
};
4.3 移动小球,就是修改小球的x、y坐标
Ball.prototype.move = function () {
this.x += this.xSpeed;
this.y += this.ySpeed;
};
4.4 碰撞检测
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;
}
};
4.5 开始运动
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ball = new Ball();
setInterval(function () {
ctx.clearRect(0, 0, 200, 200);
ball.draw();
ball.move();
ball.checkCollision();
ctx.strokeRect(0, 0, 200, 200);
}, 30);
学了下一章的键盘event,就可以做一个板儿在下面接球了。