three.js文字模糊问题

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);

写完以后突然想起来以前有一次前端生成二维码图片的清晰度不够也是通过先生成放大图，然后再缩小显示的形式来完成的。这个和那个原理上是一样的。

three.js文字模糊问题相关推荐

PixiJS 文字模糊处理策略
pixijs介绍 PixiJS是一个用于创建交互式2D图形和动画的JavaScript库.它是一个快速.轻量级.易于使用的库,可以在WebGL和Canvas上运行.支持WebGL和Canvas两种渲染 ...
uniapp canvas踩雷文字模糊图片不显示 ios系统无法下载
uniapp小程序项目中使用canvas实现本地保存海报 1.问题一,使用canvas保存到本地的图片中文字模糊解决: <canvas :style="{width:windowW+ ...
html文字...点击后全部显示,js 文字超出部分隐藏、点击显示更多示例
这篇文章主要为大家详细介绍了js 文字超出部分隐藏.点击显示更多示例,具有一定的参考价值,可以用来参考一下. 感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随512笔记的小编罗X来 ...
watermark.js文字水印以及图片水印
watermark.js文字水印以及图片水印以下为扒下来修改后的源码: //增加了图片水印,实现原理跟文字的一样,只是针对项目需求个人修改 function watermark(settings) ...
AE制作文字模糊特效
AE是一款很实用的特效办公软件,但是使用AE制作文字模糊特效的办法是什么呢,下面给大家分享一些技巧,快来学习吧! 首先我们新建一个项目,然后新建一个合成. 合成名称:文字特效预设:选择HDV/HDT ...
【存货系列】JS文字转语音方案设计及实现
文章目录 JS文字转语音方案设计及实现写在前面的话设计思路总体逻辑设计核心接口设计代码实现可配置对象初始化函数 IE浏览器实现 Chrome/Safari浏览器实现使用方式引入js文 ...
使用swiper组件的transform属性导致文字模糊的解决办法
使用transform属性导致文字模糊的解决办法我先说说我的问题吧,我是因为使用swiper等类似的轮播插件中在较小的的分辨率比如电视上的看板,使用的960*540的分辨率下出现抖动以及文字模糊有锯 ...
transform: scale() 图片文字模糊的原因
今天做一个刮刮乐H5应用的时候,用到了个简单的 CSS 动画效果,就是使用缩放transform: scale(.1) 从小变大弹出获奖窗口,以及按钮重复变大变小的动画,结果遇到个很郁闷的问题,按钮和 ...
分享111个JS文字特效，总有一款适合您
分享111个JS文字特效,总有一款适合您 111个JS文字特效下载链接:https://pan.baidu.com/s/1Ql-wGwfjovvu78bvpwD-8w?pwd=wqgg 提取码:wq ...

three.js文字模糊问题

three.js文字模糊问题相关推荐

最新文章

热门文章