微信小程序小游戏开发语言是javascript,小程序创建canvas

　　
你只能使用 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步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。了解更多小程序商城个性化定制，请查看小程序商城申请