在 Canvas 2d 中模糊文本答案

【问题标题】：Blur text in Canvas 2d在 Canvas 2d 中模糊文本
【发布时间】：2013-08-04 11:05:43
【问题描述】：

如何使使用 2d 画布绘制的文本更清晰（context.fillText）。

下面是我要修复的模糊文本的屏幕截图。屏幕截图是在 Mac 上使用最新版本的 Chrome 拍摄的。在我尝试过的任何浏览器中，输出都是模糊的。

我正在使用three.js 并在屏幕上写文本，我正在使用canvas2d。

当我通过将相机靠近对象来放大页面时，所有画布元素变得越来越模糊。

有什么办法可以解决这个问题吗？

你也可以看到这里的文字是模糊的：

http://stemkoski.github.io/Three.js/Texture-From-Canvas.html

【问题讨论】：

标签： canvas html5-canvas three.js

【解决方案1】：

由于您正在为文本创建纹理，唯一的方法就是提高纹理分辨率。当前发生的情况是您正在获取一个小纹理并对其进行拉伸，这使其变得模糊，例如，当您将图像缩略图拉伸到全尺寸时也会发生同样的事情。

忽略未加载的纹理，黑色区域，它们对示例并不重要

Live Demo

我为增加纹理的清晰度所做的是创建一个 600 x 120 的画布（这是该演示使用的大小的两倍），在其上绘制文本并将 fontsize 设置为 120px，然后我制作网格 300 x 60，是纹理大小的一半。

    // Specified the width I wanted 
    canvas1.width=600;
    // Specified the height I wanted
    canvas1.height=120;
    // Made the font larger
    context1.font = "Bold 100px Arial";
    context1.fillStyle = "rgba(255,0,0,0.95)";
    // changed the position of the text on the created canvas
    context1.fillText('Hello, world!', 0, 100);

创建网格时，我只是指定了我希望网格的大小，即纹理大小的 50%，以匹配演示网格的大小。

    var mesh1 = new THREE.Mesh(
        new THREE.PlaneGeometry(300, 60),
        material1
      );

【讨论】：