canvas(五) 使用图像

使用图像

---

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

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

1. 获得一个指向 HTMLImageElement 的对象或者另一个 canvas 元素的引用作为源， 也可以通过提供一个URL的方式来使用图片。
2. 使用 drawImage() 函数将图片会知道画布上。

获得需要绘制的图片

canvas 的API 可以使用下面这些类型中的一种作为图片的源：

HTMLImageElement
这些图片是由 Image() 函数构造出来的，或者任何的 元素

HTMLVideoElement
用一个HTML的 元素作为图片源，可以从视频中抓取当前帧作为一个图像

HTMLCanvasElement
可以使用另一个 元素作为图片源。

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