微信小游戏开发（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);
这节主要为大家讲述以上内容，下节将为大家介绍动画和触摸事件。
学习是一条令人时而喜极而泣，时而郁郁寡欢的道路。如果您觉得这篇文章对您有所帮助，请您酌情赞赏！