1

我正在开发一个需要将 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” . 您会注意到文本大小如何增加。

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

4

2 回答 2

1

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

于 2012-07-04T09:39:12.047 回答
0

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

请参阅此问题以供参考：HTML5 的画布元素上的子像素抗锯齿文本

于 2012-07-03T13:06:59.273 回答