如何使用html5的canvas做出弹幕效果
这篇文章将为大家详细讲解有关如何使用html5的canvas做出弹幕效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
我们提供的服务有：成都网站设计、网站制作、微信公众号开发、网站优化、网站认证、细河ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的细河网站制作公司
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类，添加的弹幕缓存到弹幕列表中，并记录相应弹幕信息
3、绘制弹幕文本，用文本偏移量控制移动速度
4、计算当文本超出画布时移出弹幕列表
代码
//html
Your browser does not support the video tag.
您的浏览器不支持canvas标签。
//js(function () { class Barrage {
constructor(canvas) {
this.canvas = document.getElementById(canvas);
let rect = this.canvas.getBoundingClientRect();
this.w = rect.right - rect.left;
this.h = rect.bottom - rect.top;
this.ctx = this.canvas.getContext('2d');
this.ctx.font = '20px Microsoft YaHei';
this.barrageList = [];
} //添加弹幕列表
shoot(value) {
let top = this.getTop();
let color = this.getColor();
let offset = this.getOffset();
let width = Math.ceil(this.ctx.measureText(value).width);
let barrage = {
value: value,
top: top,
left: this.w,
color: color,
offset: offset,
width: width
}
this.barrageList.push(barrage);
} //开始绘制
draw() { if (this.barrageList.length) {
this.ctx.clearRect(0, 0, this.w, this.h); for (let i = 0; i < this.barrageList.length; i++) {
let b = this.barrageList[i]; if (b.left + b.width <= 0) {
this.barrageList.splice(i, 1);
i--; continue;
}
b.left -= b.offset;
this.drawText(b);
}
}
requestAnimationFrame(this.draw.bind(this));
} //绘制文字
drawText(barrage) {
this.ctx.fillStyle = barrage.color;
this.ctx.fillText(barrage.value, barrage.left, barrage.top);
} //获取随机颜色
getColor() { return '#' + Math.floor(Math.random() * 0xffffff).toString(16);
} //获取随机top
getTop() { //canvas绘制文字x,y坐标是按文字左下角计算，预留30px
return Math.floor(Math.random() * (this.h - 30)) + 30;
} //获取偏移量
getOffset() { return +(Math.random() * 4).toFixed(1) + 1;
}
}
let barrage = new Barrage('canvas');
barrage.draw(); const textList = ['弹幕', '666', '233333333',
'javascript', 'html', 'css', '前端框架', 'Vue', 'React', 'Angular','测试弹幕效果'
];
textList.forEach((t) => {
barrage.shoot(t);
})
})();
关于“如何使用html5的canvas做出弹幕效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
本文标题：如何使用html5的canvas做出弹幕效果
链接分享：
http://jkwzsj.com/article/ghhgge.html
