微信小游戏 Three.js UI 2D text 简单方案

在微信小游戏中使用 THREE.js 引擎，没有合适的 UI 库可用，只能自己动手。图片啥的都还好，text 不好弄。text 要计算 width 和 height，不然事件响应范围不对。

function draw(canvas, params){
  let ctx = canvas.getContext('2d')

  ctx.font = params.font
  ctx.lineWidth = params.lineWidth
  canvas.width = Math.max(2, ctx.measureText(params.str).width * ratio)
  canvas.height = Math.ceil((parseFloat(params.font) + 4)  * ratio) // 手机上可以正常显示

  ctx.save() // 保存画布状态
  ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
  ctx.scale(ratio, ratio) // 缩放到像素比，使之高清

  // 背景，方便调试
  if (params.bgColor) {
    ctx.fillStyle = params.bgColor
    ctx.fillRect(0, 0, canvas.width, canvas.height)
  }

  ctx.fillStyle = params.fillStyle
  ctx.font = params.font
  ctx.lineWidth = params.lineWidth
  ctx.textAlign = params.textAlign
  ctx.textBaseline = params.textBaseline || 'top'
  ctx.fillText(params.str, 0, 0)

  ctx.restore() // 还原画布状态
}

徒手编写微信小游戏示例代码：wechat_minigame_threejs_ui