在Canvas 2d中模糊文本

Question

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

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

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

当我通过将相机移近物体来放大页面时，所有画布元素都变得越来越模糊。

任何想法我该如何解决这个问题？

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

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

Answer 1

由于您正在为文本创建纹理，唯一的方法是增加纹理分辨率。目前发生的事情是你正在采用一个小的纹理并拉伸它，这使它变得模糊，例如当你将图像缩略图拉伸到完整尺寸时会发生同样的事情。

忽略卸载的纹理，黑色区域，它们对于示例

并不重要

<强> Live Demo

我为增加纹理的清晰度所做的是创建一个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
      );