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

【问题标题】：Resizing canvas with its text content使用其文本内容调整画布大小
【发布时间】：2014-07-23 08:54:27
【问题描述】：

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

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

我尝试过使用 css 将 jquery 重新调整大小到画布的容器和调整画布的大小，但得到文本内容的高度/宽度问题，并且文本也变得模糊。谁能帮帮我..

【问题讨论】：

请参阅phrogz.net/tmp/canvas-fullscreen.html 以了解继续以原始大小绘制内容的调整大小画布的演示。如果您想在更改画布大小时更改项目的大小，那么您应该在调整大小后scale()您的上下文，然后再重新绘制

标签： javascript jquery html html5-canvas createjs

【解决方案1】：

是的，文本有许多小而紧的曲线，如果您尝试调整原始文本的大小，它们的缺陷很快就会显现出来。因此，调整文本大小——尤其是更大的大小，总是会导致文本自然“锯齿”和抗锯齿伪影变得更加明显。

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

如果您的文本始终出现在画布绘图的最顶部，则另一种方法是在画布顶部放置一个 SVG 元素。 SVG 文本可以很好地缩放，因为它是基于矢量的，而不是基于像素的。您可以使用 svg translate+scale 根据您的比例因子来定位和调整 svg 文本的大小。这是一个显示如何完成的链接：http://msdn.microsoft.com/en-us/library/gg589508(v=vs.85).aspx

【讨论】：

是的，谢谢@markE，但画布文本内容、字体及其大小正在动态变化，因此重新绘制画布时遇到问题。你能帮我吗？
是的，请查看此答案以获取有关缩放文本的完整详细信息：stackoverflow.com/questions/22943186/…