使用图像
canvas 具有操作图像的能力。可以用于动态的图像合成或者作为图像的背景，以及游戏界面(Sprites)。浏览器支持的任意外部图片格式都可以使用，还可以使用同一个页面中其他canvas元素生成的图片作为图片源。
引入图像到 canvas 里需要以下两部基本操作：
- 获得一个指向
HTMLImageElement的对象或者另一个 canvas 元素的引用作为源， 也可以通过提供一个URL的方式来使用图片。 - 使用
drawImage()函数将图片会知道画布上。
获得需要绘制的图片
canvas 的API 可以使用下面这些类型中的一种作为图片的源：
HTMLImageElement
这些图片是由 Image() 函数构造出来的，或者任何的 <img> 元素
HTMLVideoElement
用一个HTML的 <video> 元素作为图片源，可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement
可以使用另一个 <canvas> 元素作为图片源。
ImageBitmap
使用相同页面内的图片
-
document.images集合 -
document.getElementsByTagName()方法 - 使用指定图片的ID
document.getElementById()获得
使用其他域名下的图片
在 HTMLImageElement 上使用 crossOrigin 属性，可以请求加载其他域名上面的图片。
使用其他 canvas 元素
使用 document.getElementsByIdTagName 或者 document.getElementById 方法来获取其他 canvas 元素。
绘制图片
一旦获得了源图对象，我们就可以使用 drawImage 方法将它渲染到 canvas 里。 drawImage 方法有三种形态，最常见的是：
drawImage(image,x,y)
其中 image 是image 或者 canvas 对象，x/y是目标在 canvas里的起始坐标。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image()
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = "https://developer.mozilla.org/@api/deki/files/58/=Canvas_backdrop.png"
}
缩放 Scaling
drawImage 的第二种形态，增加了两个用于控制图像在 canvas 中的参数。
drawImage(image,x,y,width,height)
这个方法多了2个参数： width 和 height,这两个参数用来控制当 canvas 画入时应该缩放的大小。
切片 Slicing
drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。
drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight)
第一个参数是源图像引入，后面的前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Draw slice
ctx.drawImage(document.getElementById('source'),
33,71,104,124,21,20,87,104);
}
