微信小游戏入门(二)

在本系列的上一篇文章中，我们对小游戏的开发环境有了基本的了解，本文中我们将介绍在小程序中如何显示图像。

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 方法，代码如下:

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 中新增一个方法:

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 方法：

restart() {

  this.drawTest()
}

这样，我们就能在屏幕上看到背景图片了。

完整的 main.js 文件如下:


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()

  }
}

下一步

在下一步中，我们将介绍如何让屏幕中的图像运动起来。