初识canvas

为了还原小时候玩过的一个 flash 游戏，决定学点 html5 游戏制作。找了个外网教程，先从 canvas 元素开始

教程原地址

JavaScript Game Development Course for Beginners - YouTube

canvas

1. 从精灵图动画开始

首先在 html 里引入 canvas 标签。然后在 js 中获取其 DOM

然后获取 canvas 上的所有方法。

1

const ctx = canvas.getContext('2d');

这里的参数代表 canvas 的属性，2d 是 2d 画布。还有别的，可以做 3d 的东西

下面这么写可以清除画布内容，前面两个参数是要清除的左上角起始点，后面是宽高，表示清除一个矩形

1

ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

创建一个存精灵图的对象

1

const playerImage = new Image();

图片的传法，第一个是图片，2 3 是图片起始点（左上角），4 5 是图片拉伸大小

1
2
3
4
5

ctx.drawImage(playerImage, 0, 0, 6000, 6000);

// 还有九个参数的版本，sx sy是图片剪裁起始点，sw sh是剪裁长宽
// dx dy是图片放置位置起始点，dw dh是图片放置长宽
ctx.drawImage(playerImage, sx, sy, sw, sh, dx, dy, dw, dh);

创建一个帧，使用(其中 animate 传一个函数，可以放包含上面东西的，操纵 canvas)

1

requestAnimationFrame(animate);

我们可以在 animate 里使用此函数调用 animate 函数自己，就能实现一直创建帧。

在控制 canvas 的函数的参数里使用变量，并且让他们变化，就能实现基础的动画