当前位置:网站首页>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
边栏推荐
- Customize classloader and implement hot deployment - use loadclass
- Web17 -- use of El and JSTL
- Packet capturing and sorting -- TCP protocol [8]
- Unlock openharmony technology day! The annual event is about to open!
- JDBC connection pool
- Golang realizes regular matching: the password contains at least one digit, letter and special character, and the length is 8-16
- Huawei cloud MVP email
- box-sizing
- SSL certificate refund instructions
- leetcode-791. 自定义字符串排序
猜你喜欢
mysql8安装
98. Error s.e.errormvcautoconfiguration $staticview reported by freemaker framework: cannot render error page for request
使用Source Insight查看编辑源代码
Deploying MySQL in cloud native kubesphere
风尚云网学习-h5的input:type属性的image属性
V-model binding value in El select, data echo only displays value, not label
Homomorphic encryption technology learning
Important knowledge of network layer (interview, reexamination, term end)
Important knowledge of transport layer (interview, retest, final)
Huawei cloud MVP email
随机推荐
Packet capturing and sorting -- TCP protocol [8]
Sort out several uses of network IP agent
Common problems of unity (1)
将opencv 图片转换为字节的方式
Remote access to raspberry pie at home (Part 1)
Go language array operation
22. 括号生成
精度、速度完美平衡,最新图像分割SOTA模型重磅发布!!!
Kubernetes 入门教程
Process virtual address space partition
PHP generates JSON to process Chinese
Object. The disorder of key value array after keys
22. Bracket generation
Golang realizes regular matching: the password contains at least one digit, letter and special character, and the length is 8-16
STM32 control stepper motor (ULN2003 + 28byj)
31. 下一个排列
SSM framework series - data source configuration day2-1
梳理网络IP代理的几大用途
[Blue Bridge Cup] April 17 provincial competition brushing training (the first three questions)
mysql支持ip访问