我一直在尝试使用canvas标签和Javascript.我创建了一个页面,从Twitter公共时间轴上获取推文并将其动画显示.它的工作原理是在动画的背景中使用canvas元素.动画完成后,它会在顶部创建一个div元素,文本相同.我这样做是为了使推文文本可以选择,链接是可点击的.
现在,在Safari,Chrome甚至Opera中,画布文本和div文本看起来几乎完全相同.然而在Firefox中,文本的大小不同,足以使它在转换为div时"跳跃".
有谁知道如何让Firefox使用CSS在canvas元素和div上渲染文本相同？或者这是与引擎的渲染不一致.
如果你想看看我的意思,我已将网页放在我的网站上.
现在代码:
我用于渲染div的CSS包含:
line-height: 21px; font-weight: 100; font-family: Georgia, "New Century Schoolbook", "Nimbus Roman No9 L", serif; font-size: 20px;
在我正在使用的画布上渲染:
this.context.font = this.scale + 'px Georgia';
this.context.fillStyle = "white";
this.context.strokeStyle = 'white';
this.context.fillText(this.text, 0, 0);
this.context.strokeText(this.text, 0, 0);
其中this.scale是一个动画缩放因子,精确到20px.因此,回顾一下,我使用相同的字体并以相同的px大小结束,但Firefox在Canvas和CSS之间呈现不同的文本.
(编辑)这是一个截图示例: alt text http://danforys.com/temp/firefox-behaviour.png
第一行是使用画布动画的文本,第二行是生成的div.
