HTML5 Canvas TextBaseline Top在Firefox和Chrome中看起来不同 [英] HTML5 Canvas TextBaseline Top looks different in Firefox and chrome

问题描述

在canvas中，当将textBaseline属性设置为top时，其在Chrome和Firefox中的渲染方式不同。在Chrome中，行与文本之间存在差距，因为Firefox中没有任何差距。

请参阅

我同意OP的看法，这是一个问题，它是 Firefox 特有的。不过越来越多的是，Firefox 似乎已经调整了垂直偏移加班。它曾经是4像素，然后是3。现在，它几乎察觉不到。所以，我同意上面的@Kaiido。使用/设置 * object * .textBaseline =alphabetic; 我相信这在浏览器中是一致的

In canvas, while setting textBaseline property to 'top', its rendering differently in chrome and firefox. In chrome, there is a gap between line and the text where as there is no gap in firefox.

Kindly refer this to view in your browser, any help would be thankful.

I also checked similar issue reported long-back. Is there any work-around in firefox to get it work fine?

解决方案

I agree with the OP that this is an issue and it's peculiar to Firefox. Increasingly though, it seems that Firefox has adjusted the vertical offset overtime. It was once once about 4 pixels, then 3. Now, it is almost imperceptible. So, I agree with @Kaiido above. Use/set *object*.textBaseline="alphabetic"; I believe that this is consistent across browsers.

这篇关于HTML5 Canvas TextBaseline Top在Firefox和Chrome中看起来不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！