canvas笔记五---使用图片

1、引入图像到canvas需要两个步骤：
（1）获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源，也可以通过提供一个URL的方式来使用图片
（2）使用drawImage()函数将图片绘制到画布上

drawImage(image, x, y)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

获得需要绘制的图片
canvas的API可以使用下面这些类型中的一种作为图片的源：
HTMLImageElement
这些图片是由Image()函数构造出来的，或者任何的元素
HTMLVideoElement
用一个HTML的 元素作为你的图片源，可以从视频中抓取当前帧作为一个图像
HTMLCanvasElement
可以使用另一个 元素作为你的图片源。
ImageBitmap
这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。
这些源统一由 CanvasImageSource类型来引用。

var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
  ctx.drawImage(img,0,0);
  ctx.beginPath();
  ctx.moveTo(30,96);
  ctx.lineTo(70,66);
  ctx.lineTo(103,76);
  ctx.lineTo(170,15);
  ctx.stroke();
}
img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';

2、缩放

drawImage(image, x, y, width, height)
这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小

3、切片

drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
image
绘制到上下文的元素。允许任何的 canvas 图像源(CanvasImageSource)，例如：CSSImageValue (en-US)，HTMLImageElement，SVGImageElement (en-US)，HTMLVideoElement，HTMLCanvasElement，ImageBitmap 或者OffscreenCanvas。
sx可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。
sy可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。
sWidth可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。
sHeight可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
dx
image的左上角在目标canvas上 X 轴坐标。
dy
image的左上角在目标canvas上 Y 轴坐标。
dWidth可选
image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
dHeight可选
image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。