在本系列的上一篇文章中,我们对小游戏的开发环境有了基本的了解,本文中我们将介绍在小程序中如何显示图像。
canvas 和 context
很在 H5 中类似,在小程序里将图像显示在屏幕中是通过将图像画在 canvas 对象中来完成的,而具体完成画的 API 被封装在由 canvas 生成的 context 对象中,使用以下的 API 调用获得:
1
| let ctx = canvas.getContext('2d')
|
如果想要在屏幕上画一个绿色的矩形,可以使用下面的代码:
1 2
| ctx.fillStyle = '#1aad19' ctx.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100)
|
效果是在屏幕的中央画了一个绿色的,大小为 100x100 的矩形。 (以上部分参考了微信小游戏的官方文档)
显示图片
如果要将一幅图片显示在屏幕上,可以使用 drawImage 方法, 代码如下:
1 2 3 4 5 6 7 8 9 10 11
| let img = wx.createImage() img.onload = function () { ctx.drawImage(img, 0, 0) } img.src = 'images/bg.jpg'
ctx.drawImage( img, 0, 0 )
|
这样我们就就将项目中的 bg.jpg 文件显示在屏幕上的 (0, 0) 坐标处。
整合小游戏
为了让我们能看到效果,我们将刚才的改动整合到小游戏中。 在 main.js 中新增一个方法:
1 2 3 4 5 6 7 8 9 10 11 12 13
| drawTest() { let img = wx.createImage() img.onload = function () { ctx.drawImage(img, 0, 0) } img.src = 'images/bg.jpg'
ctx.drawImage( img, 0, 0 ) }
|
然后在 restart 中调用刚才写的 drawTest 方法:
1 2 3 4
| restart() {
this.drawTest() }
|
这样,我们就能在屏幕上看到背景图片了。
完整的 main.js 文件如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| let ctx = canvas.getContext('2d')
export default class Main { constructor() {
this.restart() }
drawTest() { ctx.fillStyle = '#1aad19' ctx.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 50, 100, 100)
let img = wx.createImage() img.onload = function () { ctx.drawImage(img, 0, 0) } img.src = 'images/bg.jpg'
ctx.drawImage( img, 0, 0 ) }
restart() {
this.drawTest() }
render() { }
update() { }
loop() {
this.update() this.render()
} }
|
下一步
在下一步中,我们将介绍如何让屏幕中的图像运动起来。