微信小游戏 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() // 还原画布状态 }