Canvas弹幕实现

最新推荐文章于 2024-08-01 09:37:16 发布

bestvist

最新推荐文章于 2024-08-01 09:37:16 发布

阅读量2.9k

点赞数

分类专栏： canvas js 文章标签： canvas 视频 dom 2d javascript

本文链接：https://blog.csdn.net/qq_38082661/article/details/78348376

版权

这篇博客介绍了如何利用canvas原生技术实现直播视频的弹幕效果，以解决大量DOM元素导致的页面卡顿问题。主要内容包括canvas基础知识，如绘制文字、文本宽度和清除绘制内容，以及具体的实现步骤，包括创建canvas元素、创建Barrage类、控制弹幕移动速度和处理超出画布的弹幕。最后，作者强调canvas在优化动画显示和提升性能上的优势。

摘要由CSDN通过智能技术生成

原文链接

canvas原生实现直播视频弹幕效果。

上一篇中用动态创建DOM元素实现弹幕效果，好处是可以在DOM元素上添加事件，但问题是当大量弹幕出现会造成页面卡顿，于是尝试用canvas绘制弹幕效果。

canvas知识

绘制文字

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.font = '20px Microsoft YaHei';          //字体、大小
ctx.fillStyle = '#000000';                  //字体颜色
ctx.fillText('canvas 绘制文字', 100, 100);   //文本，字体x,y坐标