用canvas实现的弹幕效果

学习网址：https://www.zhangxinxu.com/wordpress/2017/09/html5-canvas-video-barrage/

它写的功能和很全面，我只用到了其中的一点点。大家可以好好去看一看。
使用之前要先导入一个js文件：（具体内容可去参考上面的网址）

 <script src="js/canvasBarrage.js"></script>

/************************  弹幕效果  *************************/
// 弹幕数据
var dataBarrage = [{
    value: 'I will never,ever regret the things I\'ve done. Because most days,all you have are places in your memory that you can go to. ',
    time: 20, // 单位秒
    speed: 3
}, {
    value: '我只想做一个和红裙子女孩儿刚刚听完音乐会的男人。',
    color: 'blue',
    time: 2
}, {
    value: 'BGM好棒，哪里玛丽苏了？就因为男主有钱人又帅就玛丽苏了？近乎全瘫的人怎么就玛丽苏了？！',
    time: 3.2
}, {
    value: '如果她跟他真结了婚，生几个孩子，满脸褶皱地碎碎叨叨地后悔和埋怨，那一定不会是个故事了。',
    time: 17,
    color: '#FF33CC'
}, {
    value: '我不明白短评里那些打一两星的人群嘲他人的哭点，是显示自己的优越感，还是强而有力？',
    time: 5.0
}, {
    value: '我也舍不得男主…龙母眉毛全是戏',
    time: 6.3
}, {
    value: '是为了让视频尺寸不至于过大',
    time: 7.8
}, {
    value: '省流量',
    time: 8.5,
    color: '#e64c66'
}, {
    value: '我sam真是美颜盛世…',
    time: 9,
    color: '#742c1b'
}, {
    value: '对于安乐死问题讨论的电影这并不是第一次，曾获得奥斯卡最佳外语片的《深海长眠》算是一部经典',
    time: 25,
    color: '#f43e1a'
}, {
    value: '我发现我真的对外国人脸盲，我看过权游和加勒比海盗4，然而既没有认出来龙妈',
    time: 11,
    speed: 2,
    color: 'blue'
}, {
    value: '虽然大黄蜂紧身裤不优雅，但它的出场是爱情加梦想属性的，不是时尚属性',
    time: 13
}, {
    value: 'live boldly, push yourself, don\'t settle',
    time: 14,
    color: 'blue'
}, {
    value: '内容不错哦！',
    time: 18,
    color: 'yellow'
}];

// 初始化弹幕方法
var eleCanvas = document.getElementById('canvasBarrage');
var showBarrage = new CanvasBarrage(eleCanvas, video, {
    data: dataBarrage
});

$(function () {
    var $canvasWarp = $(".canvas-barrage-wrap");

    //开启 / 关闭弹幕
    $(".barrage-icon").click(function () {
        if ($(this).attr("title") == "开启弹幕") { //当前状态为 关闭
            $canvasWarp.show();
        } else { //当前状态为 开启
            $canvasWarp.hide();
        }
        $(this).hide().siblings("img").show();
    });

   
    var myBarrage = $('#inputMyBarrage');  //弹幕输入框
    var sendBtn = $(".send-btn");  //发送按钮
    var colors = ["#f43e1a", "#e4f21c", "#2538e9", "#9520ee", "pink"];
	//点击发送按钮
    sendBtn.on('click', function (event) {
        var randomColor = parseInt(Math.random() * colors.length);

        // 新增弹幕
        showBarrage.add({
            value: $('#inputMyBarrage').val(),
            time: video.currentTime,
            color: colors[randomColor],
            fontSize: 20
        });
		//清空弹幕输入框
        myBarrage.val('');
    });

    //回车时也能发送弹幕
    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            sendBtn.trigger("click");
        }
    });

});