HTML5的canvas元素上的子像素消除锯齿的文本

前端之家收集整理的这篇文章主要介绍了HTML5的canvas元素上的子像素消除锯齿的文本前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有点困惑的方式canvas元素反混淆文本,希望你们都可以帮助。

在下面的截图中,顶部的“Quick Brown Fox”是一个H1元素,底部的是一个canvas元素,文本呈现在它上面。在底部,您可以看到两个“F”并排放置和放大。注意H1元素与背景更好地混合:

这里是我用来渲染画布文本的代码

var canvas = document.getElementById('canvas');
        if (canvas.getContext){

            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'black';
            ctx.font = '26px Arial';
            ctx.fillText('Quick Brown Fox',26);
        }

是否可以在canvas上渲染文本,使其看起来与H1元素完全相同?为什么他们不同?

解决方法

回答自己的问题:

可以使用本网站上展示的技术:

https://bel.fi/alankila/lcd/

唯一的问题是它太慢,无法在生产应用程序中实现。如果有人跑得更快,请让我知道。

原文链接:https://www.f2er.com/html5/169603.html

猜你在找的HTML5相关文章