使用原生canvas_JS弹幕效果-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);    

  <div style="position:relative;width:500px;height:400px;text-align:center;">
       <video controls="controls" autoplay="autoplay" style="width:100%;height:100%;">
           <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg" />
           <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4" /> 
           Your browser does not support the video tag.
       </video>

       <canvas id="canvas" width="500" height="400" style="position:absolute;top:0;left:0;">
           您的浏览器不支持canvas标签。
       </canvas>
   </div>

  (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);
       })

   })();