1

我正在尝试在画布中绘制文本，但绘制的文本有锯齿，尤其是在 chrome 31.0.1650 中。我试过-webkit-font-smoothing:antialiased,text-shadow了，但一切都是徒劳的。

如何解决这个问题？提前致谢。

这是样式代码：

<style>
    #my_canvas{           
        -webkit-font-smoothing: antialiased;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
        text-indent: -9999px; 
    }                   
</style>

正文中的代码：

<canvas id="my_canvas" height="300" width="2200"></canvas>
<script>
    var canvas = document.getElementById("my_canvas");
    var context = canvas.getContext("2d");
    context.imageSmoothingEnabled =true;
    context.fillStyle = "BLACK";
    context.font = "bold 100px Arial";
    context.fillText("A quick brown fox jumps over the lazy dOg", 50, 200);
</script>
4

1 回答 1

2

这是 Chrome 文本引擎的问题。

不过，您可以使用一种技术来解决此问题：

  • 将屏幕外画布设置为屏幕画布大小的两倍
  • 按比例将文本绘制到屏幕外画布：字体大小和位置
  • 将屏幕外画布绘制到缩小的主画布（在本例中为一半）。

现场演示在这里

差异是微妙的（如预期的那样），但提高了质量。这是一个放大：

相比

旁注：CSS 不会影响画布的内容，只会影响元素。默认情况下启用图像平滑，并且仅影响图像而不影响文本或形状（尽管我们将在此技术中使用它）。

var scale = 2;  // scale everything x2.

var ocanvas = document.createElement('canvas');
var octx = ocanvas.getContext('2d');

ocanvas.width = canvas.width * scale;   // set the size of new canvas
ocanvas.height = canvas.height * scale;

// draw the text to off-screen canvas instead at double sizes
octx.fillStyle = "BLACK";
octx.font = "bold " + (100 * scale) + "px Arial";
octx.fillText("A quick brown fox jumps over the lazy dOg", 50*scale, 200*scale);

// key step is to draw the off-screen canvas to main canvas
context.drawImage(ocanvas, 0, 0, canvas.width, canvas.height);

发生的情况是我们在这里的混合中引入了插值。Chrome 也会将文本非常粗糙地绘制到屏幕外的画布上，但是在文本被光栅化后，我们可以将其作为图像处理。

当我们将画布（又名图像）以一半大小绘制到我们的主画布上时，插值（子采样）就会启动，并对像素进行低通滤波，从而获得更平滑的外观。

它当然会占用更多的内存，但如果结果很重要，那么现在要付出的代价很小。

您可能会注意到除 2 之外的其他值效果不佳。这是因为画布通常使用双线性插值而不是双三次（这将允许我们使用 4）。但我认为 2x 在这种情况下对我们很有帮助。

为什么不使用变换，即。scale()? Chrome 的文本引擎（或它的使用方式）不会将文本光栅化为 1x，然后对其进行转换。它采用向量，对其进行转换，然后对文本进行光栅化，这将给出相同的结果（即缩放 0.5，绘制双倍）。

于 2014-03-13T07:40:07.590 回答