cavans实现静态滚动弹幕

最新推荐文章于 2024-04-15 13:58:42 发布

唐策

最新推荐文章于 2024-04-15 13:58:42 发布

阅读量544

点赞数

分类专栏： js 文章标签： cavans实现静态滚动弹幕

本文链接：https://blog.csdn.net/qq_29132907/article/details/85258135

版权

js 专栏收录该内容

46 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
 <!-- 弹幕文字 -->
<div class="video-x"></div>	
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 弹幕
  var dataBarrage = [{
      value: "使用的是静态死数据",
      color: "blue",
      range: [0, 0.5]
    },
    {
      value: "随机循环播放",
      color: "blue",
      range: [0, 0.6]
    },
    {
      value: "可以控制区域和垂直分布范围",
      color: "blue",
      range: [0, 0.5]
    },
    {
      value: "字体大小和速度在方法内设置",
      color: "black",
      range: [0.1, 1]
    },
    {
      value: "适合用在一些静态页面上",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: "基于canvas实现",
      color: "black",
      range: [0.2, 0.9]
    },
    {
      value: "因此IE9+浏览器才支持",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: "可以设置边框颜色",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: "文字颜色默认都是白色",
      color: "black",
      range: [0.2, 0.9]
    },
    {
      value: "若文字颜色不想白色",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: "需要自己调整下JS",
      color: "black",
      range: [0.6, 0.7]
    },
    {
      value: "如果需要的是真实和视频交互的弹幕",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: "可以回到原文",
      color: "black",
      range: [0, 0.9]
    },
    {
      value: "查看另外一个demo",
      color: "black",
      range: [0.7, 1]
    },
    {
      value: "下面就是占位弹幕了",
      color: "black",
      range: [0.7, 0.95]
    },
    {
      value: "前方高能预警！！！",
      color: "orange",
      range: [0.5, 0.8]
    },
    {
      value: "前方高能预警！！！",
      color: "orange",
      range: [0.5, 0.9]
    },
    {
      value: "前方高能预警！！！",
      color: "orange",
      range: [0, 1]
    },
    {
      value: "前方高能预警！！！",
      color: "orange",
      range: [0, 1]
    }
  ];    
// 弹幕方法
  var canvasBarrage = function (canvas, data) {
    if (!canvas || !data || !data.length) {
      return;
    }
    if (typeof canvas == "string") {
      canvas = document.querySelector(canvas);
      canvasBarrage(canvas, data);
      return;
    }
    var context = canvas.getContext("2d");
    // canvas.width = '';
    // canvas.height = '';

    // 存储实例
    var store = {};

    // 字号大小
    var fontSize = 12;

    // 实例方法
    var Barrage = function (obj, index) {
      // 随机x坐标也就是横坐标，对于y纵坐标，以及变化量moveX
      this.x = (1 + (index * 0.1) / Math.random()) * canvas.width;
      this.y =
        obj.range[0] * canvas.height +
        (obj.range[1] - obj.range[0]) * canvas.height * Math.random() +
        36;
      if (this.y < fontSize) {
        this.y = fontSize;
      } else if (this.y > canvas.height - fontSize) {
        this.y = canvas.height - fontSize;
      }
      this.moveX = 1 + Math.random() * 3;

      this.opacity = 0.8 + 0.2 * Math.random();
      this.params = obj;

      this.draw = function () {
        var params = this.params;
        // 根据此时x位置绘制文本
        context.strokeStyle = params.color;
        context.font =
          "bold " + fontSize + 'px "microsoft yahei", sans-serif';
        context.fillStyle = "rgba(255,255,255," + this.opacity + ")";
        context.fillText(params.value, this.x, this.y);
        context.strokeText(params.value, this.x, this.y);
      };
    };

    data.forEach(function (obj, index) {
      store[index] = new Barrage(obj, index);
    });

    // 绘制弹幕文本
    var draw = function () {
      for (var index in store) {
        var barrage = store[index];
        // 位置变化
        barrage.x -= barrage.moveX;
        if (barrage.x < -1 * canvas.width * 1.5) {
          // 移动到画布外部时候从左侧开始继续位移
          barrage.x = (1 + (index * 0.1) / Math.random()) * canvas.width;
          barrage.y =
            (barrage.params.range[0] +
              (barrage.params.range[1] - barrage.params.range[0]) *
              Math.random()) *
            canvas.height;
          if (barrage.y < fontSize) {
            barrage.y = fontSize;
          } else if (barrage.y > canvas.height - fontSize) {
            barrage.y = canvas.height - fontSize;
          }
          barrage.moveX = 1 + Math.random() * 3;
        }
        // 根据新位置绘制圆圈圈
        store[index].draw();
      }
    };

    // 画布渲染
    var render = function () {
      // 清除画布
      context.clearRect(0, 0, canvas.width, canvas.height);

      // 绘制画布上所有的圆圈圈
      draw();

      // 继续渲染
      requestAnimationFrame(render);
    };

    render();
  };
  
 var canvas = '<canvas id="canvasBarrage" class="canvas-barrage"></canvas>'
    $('.video-x').html(canvas);
    canvasBarrage("#canvasBarrage", dataBarrage);
  }) 
</script>
</body>
</html>