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