W3C上介紹的可以用canvas的drawImage方法繪制圖片：
相應的HTML代碼如下：
<html> <head> </head> <body> <canvas></canvas> <img src="圖片地址" id="tulip"></img> </body> </html>
但是這樣子按照上面js代碼操作之后會發現，圖片並沒有繪制在canvas畫布上，但是我們在var img = document.getElementById('tulip')這句代碼之后console.log(img)卻發現img是獲取到了的，那為什么繪制不出來呢?
經過一番測試之后，發現如果將代碼寫在window.onload事件中就能繪制成功，這說明，在我們使用drawImage方法的時候，獲取的img元素並沒有加載繪制完成。
這樣我們就知道了，必須要在圖片資源加載完畢之后才能夠進行canvas的圖片繪制，主要方法可以有以下兩種：
// 直接將頁面中的img繪制在canvas中
let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); let img = document.getElementsByTagName('img')[0]; img.onload = function() { ctx.drawImage(img, 10, 300, 200, 260); }
// 動態創建img標簽
let img = new Image(); img.src = './image/1.jpg'; // 圖片地址 img.onload = function () { ctx.drawImage(img, 0, 0, 300, 400); };
總之，不論是哪種方法，都要在img.onload事件中進行canvas圖片繪制。