Canvas弹幕实现

这篇博客介绍了如何利用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坐标

文本宽度

ctx.measureText('文本宽度').width

清除绘制内容

ctx.clearRect(0, 0, width, height);    

实现步骤

1、创建canvas元素利用绝对定位覆盖在视频上
2、创建Barrage类,添加的弹幕缓存到弹幕列表中,并记录相应弹幕信

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值