Question

我有一个带有一些文字的画布，我想在各个方向上重新调整大小，但问题是如果我通过使用css属性使其重新调整大小，那个画布中的文本内容会变得模糊。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

我已经尝试使用容器到画布重新调整jquery并使用css调整画布大小，但是获取文本内容的高度/宽度问题以及文本变得模糊。任何人都可以帮助我..

Answer 1

是的，文字有很多小＆amp;如果您尝试调整原始文本的大小，紧密曲线的缺陷很快就会变得明显。因此，调整文本大小 - 特别是调整大小，将始终导致文本自然“锯齿”和抗锯齿伪像变得更加明显。

画布的常用方法是将画布上的所有内容视为可重绘的。使用该方法，您可以清除画布并使用适当调整大小的字体重绘文本。

如果您的文本始终显示在画布上最顶层，则可以选择将SVG元素放在画布上。 SVG文本可以很好地扩展，因为它是基于矢量的，而不是基于像素的。您可以使用svg translate + scale来定位＆amp;根据您的比例因子调整svg文本的大小。这是一个显示如何完成的链接：http://msdn.microsoft.com/en-us/library/gg589508(v=vs.85).aspx

使用文本内容调整画布大小

1 个答案: