在微信小游戏中使用 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. python基础之读取xml

    python怎么操作xml文件详细介绍链接:https://www.jb51.net/article/50812.htm 从结构上来说,xml很像常见的HTML超文本标记语言.不过超文本语言被设计用来 ...

  2. 2021最新Java基础知总结,助力大厂offer

    本文是我花了三周时间整理出来的,希望对Java初学者有帮助~ Java概述 Java的特点 Java是一门面向对象的编程语言.面向对象和面向过程是一种软件开发思想. 面向过程就是分析出解决问题所需要的 ...

  3. js中变量提升和函数提升

    变量提升和函数提升的总结 我们在学习JavaScript时,会遇到变量提升和函数提升的问题,为了理清这个问题,现做总结如下,希望对初学者能有所帮助 我们都知道 var 声明的变量有变量提升,而 let ...

  4. Discuz 7.x/6.x 全局变量防御绕过导致代码执行

    地址 http://192.168.49.2:8080/viewthread.php?tid=13&extra=page%3D1 安装成功后,找一个已存在的帖子,向其发送数据包,并在Cooki ...

  5. LeetCode通关:数组十七连,真是不简单

    分门别类刷算法,坚持,进步! 刷题路线参考:https://github.com/chefyuan/algorithm-base       https://github.com/youngyangy ...

  6. [GXYCTF2019]Ping Ping Ping(ping命令执行绕过Waf)

    记一道ping注入的题.过滤了很多字符. 分析 简单的测了一下,很容易就拿到了flag.php和index.php. 但是存在waf无法直接查看.直接?ip=127.0.0.1|cat flag.ph ...

  7. 那些 22 岁毕业做Android开发的人,他们 50 岁左右时的人生轨迹是怎样的?

    本人今年35了,已经干了14年程序员,是14年不是13年,因为我是专科毕业. 一直就是普普通通的程序员,特别纯的码农,从没做过管理岗位,并且很可能以后也是如此. 现在已经上有老下有小. 曾经在某著名互 ...

  8. CMMI相关图书

    Integrating CMMI and Agile Development: Case Studies and Proven Techniques for Faster Performance Im ...

  9. Linux中的DNS反解析

    安装bind软件包 yum -y install bind 查找配置文件路径 修改系统配置文件 配置反向解析文件 修改网卡信息,关闭防火墙 测试实验

  10. 【笔记】衡量线性回归法的指标 MSE,RMS,MAE以及评价回归算法 R Square

    衡量线性回归法的指标 MSE,RMS,MAE以及评价回归算法 R Square 衡量线性回归法的指标 对于分类问题来说,我们将原始数据分成了训练数据集和测试数据集两部分,我们使用训练数据集得到模型以后 ...