## 第一课时：写入图像 Canvas API 允许将图像文件写入画布，做法是读取图片后，使用`drawImage()`方法将这张图片放上画布。 `CanvasRenderingContext2D.drawImage()`有三种使用格式。 ~~~ ctx.drawImage(image, dx, dy); ctx.drawImage(image, dx, dy, dWidth, dHeight); ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); ~~~ 各个参数的含义如下。 * image：图像元素 * sx：图像内部的横坐标，用于映射到画布的放置点上。 * sy：图像内部的纵坐标，用于映射到画布的放置点上。 * sWidth：图像在画布上的宽度，会产生缩放效果。如果未指定，则图像不会缩放，按照实际大小占据画布的宽度。 * sHeight：图像在画布上的高度，会产生缩放效果。如果未指定，则图像不会缩放，按照实际大小占据画布的高度。 * dx：画布内部的横坐标，用于放置图像的左上角 * dy：画布内部的纵坐标，用于放置图像的右上角 * dWidth：图像在画布内部的宽度，会产生缩放效果。 * dHeight：图像在画布内部的高度，会产生缩放效果。 下面是最简单的使用场景，将图像放在画布上，两者左上角对齐。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = 'image.png'; img.onload = function () { ctx.drawImage(img, 0, 0); }; ~~~ 上面代码将一个 PNG 图像放入画布。这时，图像将是原始大小，如果画布小于图像，就会只显示出图像左上角，正好等于画布大小的那一块。 如果要显示完整的图片，可以用图像的宽和高，设置成画布的宽和高。 ~~~ var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var image = new Image(60, 45); image.onload = drawImageActualSize; image.src = 'https://example.com/image.jpg'; function drawImageActualSize() { canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(this, 0, 0, this.naturalWidth, this.naturalHeight); } ~~~ 上面代码中，`<canvas>`元素的大小设置成图像的本来大小，就能保证完整展示图像。由于图像的本来大小，只有图像加载成功以后才能拿到，因此调整画布的大小，必须放在`image.onload`这个监听函数里面。