首先，給canvas標簽，寫上一個id，然后，通過一個js方法，

document.getElementByID("id-canvas")

把這個方法的結果，傳遞給某個值。然后這個值，不是變量，是一個對象。

然后這個對象有方法，可以畫圖，是2d，還是3d

canvas.getContext("2d")

這個context是環境的意思，意思就是，給我們在這個地方里面，建立一個環境，這個環境是2d的，然后，把這個環境，傳遞給一個變量，下次這個變量，也是一個對象的實例，然后這個實例就可以直接調用畫圖像的方法。

具體怎么做？

1、把這個canvas，作為參數，傳遞給一個變量

var canvas = document.getElementById("id-canvas")

var context = canvas.getContext("2d")

最后，這個context如何畫圖呢？就會使用到，context.drawImage(img,0,0)

但是，在這之前，我們應該，先創建一個圖片對象

var img = new Image()

img.src = "paddle.png"

然后，我們要知道，一個onload方法，這個是在html里面的話，onload是寫在html標簽屬性里面的，它的值就是一個js函數，就是載入的時候，他會自動運行。onload，就是加載的意思。

然后，我們如何加載圖片，也是類似的方法。

img.onload = function(){
context.drawImage(img,0,0)

}

為什么要用這個寫法呢？為什么就不能夠直接載入圖片，為什么要這么花里胡哨的呢？因為，載入圖片，是一個具體的行為，當我們需要載入圖片的時候，意思就是，我要載入這個圖片，但是，這個圖片需要一系列的方法，才能夠被我合法載入。因為這個是js，js的行為，就是這樣，而屬性即使相關聯，也是無法直接插入圖片的，這個和html的src="paddle.png"方法是不一樣的。