如何将 DIV 文本转换为 HTML5 画布绘图答案

【问题标题】：How to convert DIV text to HTML5 canvas drawing如何将 DIV 文本转换为 HTML5 画布绘图
【发布时间】：2012-07-03 12:32:36
【问题描述】：

我正在开发一个应用程序，该应用程序需要将 HTML“工作区”（固定大小和绝对定位的包含文本和/或图像的对象）转换为 HTML5 画布绘图。由于画布绘图方法的实现，例如 .fillText()，我很难将元素的文本添加到画布中。也就是说，我无法让画布上的文本与原始工作区对象中的文本大小相同，尽管我正在检索所有使用的 CSS 规则：

c.font = obj.title.fontStyle+' '+obj.title.fontWeight+' '+obj.title.fontSize+'px + obj.title.fontFamily;

// c = drawing context

顺便说一下，元素的字体大小以像素为单位。

该应用位于http://picselbocs.com/projects/goalcandy/。您需要使用“demo@demo.com”作为电子邮件输入和“demo”作为密码登录，然后从左侧添加一个具有标题的元素到工作区，然后按“转换为 PNG” . 您会注意到文本大小是如何增加的。

我该如何解决这个令人沮丧的问题？

【问题讨论】：

那么在分配完成后c.font 包含什么，例如alert(c.font);
我在 Safari 中试过，字体大小是正确的。似乎行高正在改变。
@mouters 看一下窗口的左上角（点击“转换为PNG”后，我做了修改，将“c.font”的内容显示在绿色容器中在那里。
@Torsten Walter 字体大小“几乎”正确，但并不完全正确。它在某种程度上更宽，这会使一行上的文本跳到下一行，以防它与对象本身一样宽。
这个网站可以在 IE 或 Chrome 上运行，但我可以在 FireFox 中看到问题

标签： javascript html canvas

【解决方案1】：

这个问题听起来很有趣，但实际上完全是白痴！因此，一旦检测到问题并且解决方案在 2 秒内（字面意思）适用，答案就非常简单。问题不是跨浏览器问题，而是 Chrome 的缩放功能。我之前放大了我打开应用程序的窗口，但我不知道它，这反过来又使画布绘图变得模糊。所以解决方案：缩小！ %#$%#$@~!@

【讨论】：

【解决方案2】：

这是画布绘制算法的一个限制，看来你真的不能轻易解决这个问题。

请参阅此问题以供参考：Subpixel anti-aliased text on HTML5's canvas element

【讨论】：