JavaScript for Kids 学习笔记13. canvas 上的动画

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定时重绘，模拟蜜蜂的飞行。

3.1. 绘制蜜蜂。 一堆圆形的叠加。主要是计算好半径和圆心。

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

3.2. 计算新的坐标

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，就可以做一个板儿在下面接球了。