小编Nor*_*ora的帖子

我知道这个问题已被多次询问过,但是我尝试了几乎所有我能在网上找到的东西,但无论在什么样的(以及任何组合)我尝试过,仍无法在画布上正确渲染文本.

对于模糊的线条和形状问题,只需在坐标上添加+ 0.5px即可解决问题:但是,此解决方案似乎不适用于文本渲染.

注意:我从不使用CSS来设置画布宽度和高度(只需尝试一次以检查HTML和CSS中的设置大小属性是否会改变任何内容).此外,问题似乎与浏览器无关.

我试过了 :

• 使用HTML创建画布,然后使用javascript而不是html
• 在HTML元素中设置宽度和高度,然后使用JS,然后使用HTML和JS
• 使用每种可能的组合将0.5px添加到文本坐标
• 更改font-family和font-size
• 更改字体大小单位(px,pt,em)
• 用不同的浏览器打开文件以检查是否有任何变化
• 禁用使用的alpha通道canvas.getContext('2d', {alpha:false}),只是让我的大部分图层消失而不解决问题

请参阅canvas和html字体渲染之间的比较:https://jsfiddle.net/balleronde/1e9a5xbf/

甚至可以将画布中的文本渲染为dom元素中的文本吗？任何建议或建议将不胜感激