## 第一課時：寫入圖像 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`這個監聽函數里面。