這次帶給大家用H5的canvas做出彈幕效果，用H5的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類，添加的彈幕緩存到彈幕列表中，並記錄相應彈幕信息
3、繪製彈幕文本，用文本偏移量控制移動速度
4、計算當文本超出畫布時移出彈幕列表
代碼
//html<div>
<video>
<source></source>
<source></source>
Your browser does not support the video tag.
</video>
<canvas>
您的浏览器不支持canvas标签。
</canvas>
</div>//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 {
barrage.shoot(t);
})
})();
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是用H5的canvas做出彈幕效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
