使用图像

---

canvas 具有操作图像的能力。可以用于动态的图像合成或者作为图像的背景，以及游戏界面(Sprites)。浏览器支持的任意外部图片格式都可以使用，还可以使用同一个页面中其他canvas元素生成的图片作为图片源。

引入图像到 canvas 里需要以下两部基本操作：

1. 获得一个指向 HTMLImageElement 的对象或者另一个 canvas 元素的引用作为源， 也可以通过提供一个URL的方式来使用图片。
2. 使用 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"
}

drawImage

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

slicing