Canvas中的模糊文本2d

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

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

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

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

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

你也可以看到文本在这里模糊：

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

enter image description here

来源

2013-08-03 Ali Salehi

因为要创建的文本纹理，唯一的办法确实是增加你的纹理分辨率。目前发生的事情是，您正在拍摄一张小纹理并将其拉伸，这会使其变得模糊不清，例如，当您将图像缩略图拉伸至全尺寸时也会发生同样的情况。

忽略卸载纹理，黑色区域，它们并不重要的例子

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 
    );

来源

2013-08-03 05:17:12 Loktar

Canvas中的模糊文本2d

回答

相关问题