1. 程式人生 > >微信小遊戲開發(3)

微信小遊戲開發(3)

一、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);
這節主要為大家講述以上內容,下節將為大家介紹動畫和觸控事件。
學習是一條令人時而喜極而泣,時而鬱鬱寡歡的道路。如果您覺得這篇文章對您有所幫助,請您酌情讚賞!
這裡寫圖片描述