在微信小游戏中使用 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

微信小游戏 Three.js UI 2D text 简单方案的更多相关文章

  1. 微信小游戏 three.js jsonloader request:fail invalid url

    微信小游戏中,用 THREE.JSONLoader 直接加载本地的 json 文件,报错.估计是跨域访问的问题 解决:把 json 文件放到服务器上,通过 url 来访问. 临时测试的话,在本地起一个 ...

  2. 微信小游戏 main.js没有被压缩

    发布时,发现main.js没有被压缩. 在config.wxgame.ts里增加如下图.

  3. 微信小游戏的本地缓存和清除的使用 (text.js image.js file-util.js)

    参考: 微信小游戏,文件系统 UpdateManager-小游戏 一.Egret提供的本地缓存工具类( 备注:新版本进行了修改,并增加了sound.js等) 在微信小游戏项目中,Egret提供了fil ...

  4. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  5. 微信小游戏 demo 飞机大战 代码分析 (一)(game.js, main.js)

    微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞机大战 代码分析(二)(databus.js) 微信小游戏 demo 飞机大战 代码分析(三)(spirit. ...

  6. 微信小游戏开发之四:使用three.js引擎

    一.前言 微信小游戏中最魔性的'跳一跳'就是基于three.js 引擎开发的 源码放到github上了:GitHub地址   请自行下载. 二.下载 three.min.js 打开页面,复制代码到本地 ...

  7. three.js 微信小游戏

    最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...

  8. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

  9. 微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js)

    微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...

随机推荐

  1. 深入刨析tomcat 之---第3篇 HTTP/1.1 长连接的实现原理

    writedby 张艳涛 长连接是HTTP/1.1的特征之一,1.1出现的原因是因为一个客户请求一个网页,这是一个http请求,这个网页中如果有图片,那么也会变为一个http请求,对于java客户端, ...

  2. JS进度条顺滑版实现

    进度条不顺滑 相信大多前端同学都自己写过音频.视频播放器,实现并不复杂.最近在小程序里,做了一个类似微博刷视频的需求.其中有一部分功能需要实现自定义进度条,在做完第一版之后发现进度条不顺滑,而后想查查 ...

  3. homeless靶机

    仅供个人娱乐 靶机信息 下载地址:https://www.vulnhub.com/entry/homeless-1,215/ 一.主机扫描 二.信息收集 在网页源码和页面上,我们发现User-Agen ...

  4. 华为高斯DB(for MySQL)搭建演示

    产品架构 云数据库 GaussDB(for MySQL)整体架构自下向上分为三层. 存储层: 基于华为DFV存储,提供分布式.强一致和高性能的存储能力,此层来保障数据的可靠性以及横向扩展能力. 存储抽 ...

  5. kms激活windows或者office

    激活windows和office windows激活密钥 Windows 10 Professional(专业版):W269N-WFGWX-YVC9B-4J6C9-T83GX Windows 10 P ...

  6. 记录21.07.23 —— Vue.js基础(二)

    Vue基础(二) 过滤器 过滤器作用 全局过滤器 输出结果 私有过滤器 输出结果 把其中一个做点修改 错误信息 自定义指令 全局自定义指令 私有自定义指令 钩子函数 注意:fond-weight是粗细 ...

  7. SQL语句(三)分组函数和分组查询

    目录 一.分组函数 特点 1. 各函数的简单使用 2. 搭配distinct的使用 3. COUNT 统计行数 4. 和分组函数一同查询的字段要求是group by后的字段 二.分组查询 1. 简单应 ...

  8. 卷向字节码-Java异常到底是怎么被处理的?

    你好呀,我是why,你也可以叫我歪歪. 比如下面这位读者: 他是看了我<神了!异常信息突然就没了?>这篇文章后产生的疑问. 既然是看了我的文章带来的进一步思考,恰巧呢,我又刚好知道. 虽然 ...

  9. Nat Comm | 中科院动物所张勇团队合作揭示动物中DNA转座子介导基因重复的机制

    1950年Barbara Mclintock 首次在玉米中发现转座子(TEs),并由此获得诺贝尔奖.尽管长期被认为是垃圾DNA,但现在TEs被广泛认可是宿主基因组演化的重要推动力.它们可引起包含基因重 ...

  10. k8s之Service详解-Service使用

    实验环境准备 在使用service之前,首先利用deployment创建出3个pod,注意要为pod设置app=nginx-pod的标签 创建deployment.yaml,内容如下 apiVersi ...