微信小游戲 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