一、wx API
我們只能用JavaScript來編寫小遊戲。
小遊戲的執行環境是一個綁定了一些方法的JavaScript VM。不同於瀏覽器，這個執行環境沒有BOM和DOM API，只有wx API。
接下來我們將介紹如何用wx API 來完成建立畫布、繪製圖形、顯示圖片的基礎功能。
二、建立Canvas
呼叫wx.createCanvas() 介面，可以建立一個Canvas物件。
注：在game.js中編寫此程式碼，可以先將game.js中已有的內容註釋掉。
var canvas = wx.createCanvas()
此時建立的canvas是一個上屏Canvas，已經顯示在了螢幕上，且與螢幕等寬等高。
console.log(canvas.width, canvas.height);
在整個小遊戲程式碼中首次呼叫wx.createCanvas() 建立的是上屏Canvas，之後呼叫則建立的是離屏Canvas。
如果你的專案中使用了官方提供的Adapter，即weapp-adapter.js，那麼此時你建立的就是一個離屏Canvas。因為在weapp-adapter.js已經呼叫了一次wx.createCanvas()，並把返回的canvas作為全域性變數暴露出來。
在此教程中，由於我們剛剛註釋掉了預設的內容，因此這裡是一個上屏Canvas。
三、在Canvas上進行繪製
通過上面的步驟，我們建立了一個canvas物件，但是我們並沒有在canvas上面繪製任何內容，因此canvas是透明的。
我們可以使用2d渲染上下文進行簡單的繪製。比如：在螢幕的左上角建立一個100*100的紅色矩形。
程式碼如下（承接第二步中的程式碼）：
var context = canvas.getContext(‘2d’);
context.fillStyle = ‘red’;
context.fillRect(0,0,100,100);
四、顯示圖片
通過wx.createImage() 介面，可以建立一個Image物件。Image物件可以載入圖片。
當Image物件被繪製到Canvas上時，圖片才會顯示在螢幕上。
var image = wx.createImage();
設定Image物件的src屬性可以載入本地的一張圖片或網路圖片。當圖片載入完畢時會執行註冊的onload回撥函式，此時可以將Image物件繪製到Canvas上。
image.onload = function(){
console.log(image.width, image.height);
context.drawImage(image,0,0);
}
image.src=’logo.png’;
上面這段程式碼的作用是：指定image的路徑，並列印其寬高，同時將其顯示在canvas中。
五、建立多個Canvas
在整個小遊戲執行期間，首次呼叫wx.createCanvas介面建立的是一個上屏Canvas。在這個canvas上繪製的內容都將顯示在螢幕上。
而第二次、第三次等之後呼叫wx.createCanvas建立的都是離屏Canvas，在離屏Canvas上繪製的內容僅僅只是繪製到了這個離屏Canvas上，並不會顯示在螢幕上。
執行以下程式碼（承接第二步和第三步中的程式碼）：
var offScreenCanvas = wx.createCanvas();
var offContext = offScreenCanvas.getContext(‘2d’);
offContext.fillStyle = ‘green’;
offContext.fiiRect(0,100,100,100);
在這種情況下並沒有在螢幕的（0，100）的位置繪製上一個100*100的綠色矩形。
為了讓這個綠色的矩形顯示在螢幕上，我們需要把離屏的offScreenCanvas繪製到上屏的Canvas上。
新增程式碼如下：
context.drawImage(offScreenCanvas,0,0);
這節主要為大家講述以上內容，下節將為大家介紹動畫和觸控事件。
學習是一條令人時而喜極而泣，時而鬱鬱寡歡的道路。如果您覺得這篇文章對您有所幫助，請您酌情讚賞！