Canvas Bitmap
图片源
两种方式：
1.
<img id="xxx" src="xxx" />
2.
var img = new Image(); img.src = "xxx";
加载
如果想在代码里使用图片，我们必须确保图片加载完了，如下：
img.addEventListener('load', imageLoaded, false);
这种为每张图片创建一个事件侦听器的方式效率上不太好，如果只是一张图片倒是没什么问题。
drawImage
drawImage() 方法被重载了，它有三个版本，下面我按需求进行分解：
现有一张100 * 100的图片，中间我用蓝线框出了一个区域，蓝框的左上角坐标为 (14, 9)，蓝框的大小为 72 * 82
需求一：按原大小把图片的画出来
版本：drawImage(img, x, y);
var img = new Image();
img.src = '1.jpg';
img.addEventListener('load', function() {
context.drawImage(img, 10, 10);
}, false);
需求二：对图片进行缩放
版本：drawImage(img, x, y, width, height);
context.drawImage(img, 10, 10, 50, 50);
可见，图片被缩小到一半大小。
需求三：从图片中取出一部分画到canvas上
版本：drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
context.drawImage(img, 14, 9, 72, 82,
10, 10, 72, 82);
这个没有缩放，下面我改变 dw 和 dh 的值，就会出现缩放了（缩小一半）：
context.drawImage(img, 14, 9, 72, 82,
10, 10, 36, 41);
关于tile
tile 这词是游戏开发中常用的，中文还真不好说，比如下面这张图就是一个tile：
这张图画了坦克运行中的8个状态，连续播放就是一段动画。
下面我简单说说怎么使用tile。比如这里的一个tank，大小是34 * 34，同时我们需要8帧动画，每一帧都会在相同的区域绘制一个tank，原理就是这样，来看代码：
var tile = new Image();
tile.src = 'tile.jpg';
tile.addEventListener('load', function() {
var x = 0, tankWidth = 34, tankHeight = 34,
totalFrame = 8, curFrame = 0;
// 设置一个定时器，这里是每秒24帧的动画
setInterval(function() {
x = curFrame * tankWidth;
context.drawImage(tile, x, 0, tankWidth, tankHeight,
10, 10, tankWidth, tankHeight);
curFrame++;
if (curFrame === totalFrame) {
curFrame = 1;
}
}, 1000 / 24);
}, false);
图片的transform
还是用tile的图片举例，我们需要tank朝向右边，即旋转90°。
如果你熟悉Flash，肯定知道它有Sprite 和 MovieClip 之类的显示对象，这样添加效果就比较独立，都是一个个的对象，互不影响。但是Canvas不是这样的，一个canvas就是一个“显示对象”，比如你有两个tank，你知道这是两个对象，但是你画到canvas上之后，只不过是canvas的两块像素区域。
如果我们应用了transform，那么整个canvas都会影响（当然应用transform之前绘制的东西不会受影响），就本例来说，我们只需要临时旋转一下tank，只是临时的用一下旋转，用完了要赶紧复原，不然之后的绘制都会受影响。
话不多说，直接看代码：
var tile = new Image();
tile.src = 'tile.jpg';
tile.addEventListener('load', function() {
// 第一个tank的信息
var x = 0, y = 0, width = 34, height = 34;
// 保存当前的context
context.save();
// 重置transform
context.setTransform(1, 0, 0, 1, 0, 0);
// 接着是旋转部分的代码
// 平移坐标系统，把坐标原点移到tank的中心
context.translate(x + width / 2, y + height / 2);
context.rotate(90 * Math.PI / 180);
context.drawImage(tile, x, y, width, height,
-0.5 * width, -0.5 * height, width, height);
// 复原刚才的状态
context.restore();
}, false);
效果如下：
图片的运动
有了tile，我们自然会想着怎么让它动起来，运动不外乎位移，位移说白了就是(x, y)的变化，下面我来分解步骤：
1. 把坐标系统的原点移动到对象的中心，这样可方便transform
2. 坐标原点变为对象中心点的另一个好处是，不再需要操心对象的坐标，只需要考虑translate(x, y)的坐标，因为对象的坐标不再变化了
来看代码：
var tile = new Image();
tile.src = 'tile.jpg';
tile.addEventListener('load', function() {
// 第一个tank的信息
var x = 0, y = 0, width = 34, height = 34;
// 定义运动的方向，这里定为水平向右运动
var dx = 1, dy = 0;
// 运动也是需要动画的
setInterval(function() {
// 重绘画布
context.fillStyle = 'lightblue';
context.fillRect(0, 0, canvas.width, canvas.height);
// 更新坐标
x += dx;
y += dy;
context.save();
context.setTransform(1, 0, 0, 1, 0, 0);
context.translate(x + width / 2, y + height / 2);
context.rotate(90 * Math.PI / 180);
context.drawImage(tile, 0, 0, width, height,
-0.5 * width, -0.5 * height, width, height);
context.restore();
}, 1000 / 24);
}, false);
最后奉上三个制作tile的工具软件：
