Canvas 二维画布中的模糊文本

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

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

我使用的是three.js，要在屏幕上写文本，我使用的是canvas2d

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

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

您还可以在此处看到文本模糊：

---

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

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

为了提高纹理的清晰度，我创建了一个600×120的画布（这是本演示使用的两倍大小），在画布上绘制文本，并将

fontsize

设置为120px，然后将网格设置为300×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
      );