ctx.clearRect(20, 10, 100, 100)
var detect = () => {
ctx.font = '50px "Vast Shadow"'
ctx.textBaseline = 'top'
ctx.fillText('123', 20, 10)
var dataNow = ctx.getImageData(20, 10, 50, 50).data
if ([].slice.call(dataNow).join('') === [].slice.call(dataDefault).join('')) {
ctx.clearRect(20, 10, 100, 100)
requestAnimationFrame(detect)
}
}
detect()
首先设置一个没有的字体，绘制上去，然后拿到对应区域的渲染数据，然后再将渲染区域清除然后，然后再设置我们需要的字体，拿到对应区域的渲染数据，然后实时对比，当渲染数据一样时，表示绘制的都是系统默认字体，我们需要的字体没有渲染出来，然后执行
requestAnimationFrame再执行detect检测方法，直到渲染数据不一样，就表示我们需要的字体已经渲染完成总结
以上所述是小编给大家介绍的html5 canvas绘制网络字体的常用方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
