切片 Slicing

drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。

语法

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

参数

1. 第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用；
2. 前4个是定义图像源的切片位置和大小；
3. 后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);
  // Draw frame
  ctx.drawImage(document.getElementById('frame'),0,0);
}