你只能使用 JavaScript 來編寫小游戲。小游戲的運行環境是一個 綁定了一些方法的 JavaScript VM。不同于瀏覽器，這個運行環境沒有 BOM 和 DOM API，只有 wx API。接下來我們將介紹如何用 wx API 來完成創建畫布、繪制圖形、顯示圖片以及響應用戶交互等基礎功能。

　　創建 Canvas

　　調用 wx.createCanvas() 接口，可以創建一個 Canvas 對象。

　　var canvas = wx.createCanvas()

　　此時創建的 canvas 是一個上屏 Canvas，已經顯示在了屏幕上，且與屏幕等寬等高。

　　console.log(canvas.width, canvas.height)

　　在整個小游戲代碼中首次調用 wx.createCanvas() 創建的是上屏 Canvas，之后調用則創建的是離屏 Canvas。如果你的項目中使用了官方提供的 Adapter 即 weapp-adapter.js(關于什么是 Adpater 請參考官方教程 Adapter)，那么你此時創建的會是一個離屏 Canvas。因為在 weapp-adapter.js 已經調用了一次 wx.createCanvas()，并把返回的 canvas 作為全局變量暴露出來。假設你的項目目錄結構如下：

　　├── game.js

　　├── weapp-adapter.js

　　└── game.json

　　在 weapp-adapter.js 中已經調用了一次 wx.createCanvas()，并把返回的 canvas 作為全局變量暴露出來。

　　// weapp-adapter

　　canvas = wx.createCanvas()

　　如果你在 require weapp-adapter.js 之后再調用 wx.createCanvas()，那么創建的 Canvas 會是一個離屏的 Canvas，因為此時已經不是對該 API 的首次調用。

　　require('./weapp-adapter')

　　var myCanvas = wx.createCanvas()

　　在 Canvas 上進行繪制

　　但是由于沒有在 canvas 上進行繪制，所以 canvas 是透明的。使用 2d 渲染上下文的進行簡單的繪制，可以在屏幕左上角看到一個 100x100 的紅色矩形。

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

　　context.fillStyle = 'red'

　　context.fillRect(0, 0, 100, 100)

　　通過 Canvas.getContext() 方法可以獲取 2d 或 WebGL 渲染上下文 RenderingContext，調用渲染上下文的繪制方法可以在 Canvas 上進行繪制。小游戲基本上支持 2d 和 WebGL 1.0 所有的屬性和方法，詳情請見 RenderingContext。由于使用 WebGL 的繪制過程較為復雜，所以本文中的示例代碼都以 2d 渲染上下文的繪制方法編寫。

　　通過設置 width 和 height 屬性可以改變 Canvas 對象的寬高，但這也會導致 Canvas 內容的清空和渲染上下文的重置。

　　canvas.width = 300

　　canvas.height = 300

　　顯示圖片

　　通過 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'

　　創建多個 Canvas

　　在整個小游戲運行期間，首次調用 wx.createCanvas 接口創建的是一個上屏 Canvas。在這個 canvas 上繪制的內容都將顯示在屏幕上。而第二次、第三次等后幾次調用 wx.createCanvas 創建的都會是離屏 Canvas。在離屏 Canvas 上繪制的內容僅僅只是繪制到了這個離屏 Canvas 上，并不會顯示在屏幕上。

　　以如下代碼為例，運行后會發現屏幕上并沒有在 (0, 0) 的位置顯示 100x100 的紅色矩形。因為我們是在一個離屏的 Canvas 繪制的。

　　var screenCanvas = wx.createCanvas()

　　var offScreenCanvas = wx.createCanvas()

　　var offContext = offScreenCanvas.getContext('2d')

　　offContext.fillStyle = 'red'

　　offContext.fillRect(0, 0, 100, 100)

　　為了讓這個紅色矩形顯示在屏幕上，我們需要把離屏的 offScreenCanvas 繪制到上屏的 screenCanvas 上。

　　var screenContext = screenCanvas.getContext('2d')

　　screenContext.drawImage(offScreenCanvas, 0, 0)

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面，所看即所得，只需要美工就能做出精美商城。了解更多小程序商城個性化定制，請查看小程序商城申請