Css 用chrome在画布中填充文本时会出现锯齿状文本

我试图在画布中绘制文本，但绘制的文本有锯齿，尤其是在chrome 31.0.1650中。 我尝试过

-webkit字体平滑：抗锯齿、文本阴影

，但都没有成功

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

以下是样式代码：

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

#我的画布{
-webkit字体平滑：抗锯齿；
文本阴影：1px 1px 1px rgba（0,0,0,0.004）；
文本缩进：-9999px；
}                   

正文中的代码：

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

var canvas=document.getElementById（“我的画布”）；
var context=canvas.getContext（“2d”）；
context.imageSmoothingEnabled=true；
context.fillStyle=“黑色”；
context.font=“bold 100px Arial”；
fillText（“一只敏捷的棕色狐狸跳过了懒狗”，50200）；

这是Chrome文本引擎的一个问题

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

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

差异很小（如预期），但提高了质量。这是放大图：

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

我们在混合中引入了插值。Chrome会在屏幕外的画布上绘制非常粗糙的文本，但是在文本变成光栅化后，我们可以将其作为图像处理

当我们将画布（又名图像）以一半的大小绘制到主画布时，插值（子采样）将起作用，并对像素进行低通滤波，从而使外观更平滑

当然，这需要更多的内存，但如果结果很重要的话，现在付出的代价很小

您可能会注意到除2以外的其他值不太适用。这是因为画布通常使用双线性插值而不是双立方（这将允许我们使用4）。但我认为2x在这种情况下很适合我们

---

为什么不使用transform，即

scale（）

？Chrome的文本引擎（或其使用方式）不会在1x处光栅化文本，然后对其进行转换。它获取向量，对其进行变换，然后对文本进行光栅化，从而得到相同的结果（即缩放0.5，绘制双精度）。

是的，文本不是画布的强大套件。您不显示代码，因此很难具体说明。确保不要重复笔划或重复填充文本。大多数字体看起来填充效果更好，但没有笔划。请分享到目前为止您尝试过的代码。谢谢大家！我添加了迄今为止完成的代码。我甚至尝试过阴影和模糊效果，但没有达到预期效果。@markE我没有使用双填充文字或笔划。我添加了代码，到目前为止已经完成了。代码中有什么错误吗？@Ken我已经编辑了文章来分享到目前为止完成的代码。谢谢你的帮助。

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