当前位置:网站首页>three.js文字模糊问题
three.js文字模糊问题
2022-04-23 12:59:00 【llsxily】
https://github.com/jsmask/JumpGame/
今天看到这个jsmask大神写的跳一跳网页,基于three.js写的。
编译直接就能运行,着实兴奋了一下,但是也遇到一个问题。
就是源代码中的GAME OVER场景上面的字和图片十分的模糊
网上找了一圈,先是找到了整体优化的方法,但是整体优化后文字和图片的画面还不是很理想。
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
后来发现了CANVAS的图像优化方法,可以用来在这优化:
可以查看https://www.geeksforgeeks.org/how-to-sharpen-blurry-text-in-html5-canvas/
左边是优化后,右边是优化前。
基本原理是,通过canvas.content的scale方法把画布放大,在上面画放大过后的图片,然后再通过thress进行缩放,提高图片的分辨率。也就是画了个两倍大的图,然后再缩小回来。
优化后代码如下:
this.context = canvas.getContext('2d');
//核心
this.context.scale(scale, scale)
this.context.fillStyle = 'rgba(0,0,0,.7)';
this.context.fillRect(((width - 400) / 2) /scale, ((height - 400 ) / 2)/scale, 400 /scale, 400/scale);
this.context.fillStyle = '#eee';
this.context.font = '11px Georgia';
this.context.fillText('Game Over', ((width - 200) / 2 - 15) /scale, ((height - 200) / 2 + 55)/scale);
this.replay_btn = new Image();
this.replay_btn.onload = () => {
this.context.drawImage(this.replay_btn, ((width / 2 - 60) /2) /scale , ((height - 200) / 2 + 125)/scale, 240 /scale, 94/ scale);
}
this.replay_btn.src = img_replay;
//核心
this.geometry = new THREE.PlaneGeometry(30, 30 * aspect);
源代码如下:
this.context = canvas.getContext('2d');
this.context.fillStyle = 'rgba(0,0,0,.7)';
this.context.fillRect((width - 200) / 2, (height - 200) / 2, 200, 200);
this.context.fillStyle = '#eee';
this.context.font = '22px Georgia';
this.context.fillText('Game Over', (width - 200) / 2 + 45, (height - 200) / 2 + 55);
this.replay_btn = new Image();
this.replay_btn.onload = () => {
this.context.drawImage(this.replay_btn, width / 2 - 60, (height - 200) / 2 + 125, 120, 47);
}
this.replay_btn.src = img_replay;
this.geometry = new THREE.PlaneGeometry(60, 60 * aspect);
写完以后突然想起来以前有一次前端生成二维码图片的清晰度不够也是通过先生成放大图,然后再缩小显示的形式来完成的。这个和那个原理上是一样的。
版权声明
本文为[llsxily]所创,转载请带上原文链接,感谢
https://blog.csdn.net/u013113491/article/details/124358056
边栏推荐
- STM32 is connected to the motor drive, the DuPont line supplies power, and then the back burning problem
- PHP generates JSON to process Chinese
- What are the forms of attack and tampering on the home page of the website
- Kubernetes 入門教程
- 4.22学习记录(你一天只做了水题是吗)
- Recovering data with MySQL binlog
- Labels and paths
- STM32 control stepper motor (ULN2003 + 28byj)
- Important knowledge of transport layer (interview, retest, final)
- The accuracy and speed are perfectly balanced, and the latest image segmentation SOTA model is released!!!
猜你喜欢
Customize the shortcut options in El date picker, and dynamically set the disabled date
STM32 project transplantation: transplantation between chip projects of different models: Ze to C8
Important knowledge of network layer (interview, reexamination, term end)
8 websites that should be known for product development to enhance work experience
MySQL supports IP access
STM32 control stepper motor (ULN2003 + 28byj)
Free and open source charging pile Internet of things cloud platform
Remote access to raspberry pie at home (Part 1)
31. 下一个排列
Customize classloader and implement hot deployment - use loadclass
随机推荐
安装nngraph
Packet capturing and sorting -- TCP protocol [8]
Install nngraph
leetcode-791. Custom string sorting
Use of Presto date function
数据库中的日期时间类型
The accuracy and speed are perfectly balanced, and the latest image segmentation SOTA model is released!!!
[csnote] ER diagram
ZigBee CC2530 minimum system and register configuration (1)
What are the forms of attack and tampering on the home page of the website
4.DRF 权限&访问频率&过滤&排序
Jiachen chapter Genesis "inner universe" joint Edition
Go language mapping operation
CGC: contractual graph clustering for community detection and tracking
XinChaCha Trust SSL Organization Validated
SSL certificate refund instructions
拥抱机器视觉新蓝海,冀为好望开启数字经济发展新“冀”遇
【csnote】ER图
Common problems of unity (1)
风尚云网学习-h5的input:type属性的image属性