1

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

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

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

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

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

您还可以看到这里的文字是模糊的：

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

在此处输入图像描述

4

1 回答 1

2

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

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

现场演示

我为增加纹理的清晰度所做的是创建一个 600 x 120 的画布（这是演示使用的大小的两倍），在其上绘制文本并将其设置fontsize为 120 像素，然后我将网格设为 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
      );
于 2013-08-03T05:17:12.847 回答