当前位置：网站首页>Cavans realizes Static Rolling barrage

Cavans realizes Static Rolling barrage

2022-07-26 13:41:00 【Tangce】 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
 <!--  Bullet screen text  -->
<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(){
//  bullet chat 
  var dataBarrage = [{
      value: " Static dead data is used ",
      color: "blue",
      range: [0, 0.5]
    },
    {
      value: " Random loop playback ",
      color: "blue",
      range: [0, 0.6]
    },
    {
      value: " It can control the area and vertical distribution range ",
      color: "blue",
      range: [0, 0.5]
    },
    {
      value: " The font size and speed are set in the method ",
      color: "black",
      range: [0.1, 1]
    },
    {
      value: " Suitable for some static pages ",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: " be based on canvas Realization ",
      color: "black",
      range: [0.2, 0.9]
    },
    {
      value: " therefore IE9+ Browser only ",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: " You can set the border color ",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: " The default text color is white ",
      color: "black",
      range: [0.2, 0.9]
    },
    {
      value: " If the text color does not want white ",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: " You need to adjust yourself JS",
      color: "black",
      range: [0.6, 0.7]
    },
    {
      value: " If you need a real and video interactive barrage ",
      color: "black",
      range: [0.2, 1]
    },
    {
      value: " You can go back to the original ",
      color: "black",
      range: [0, 0.9]
    },
    {
      value: " Look at another demo",
      color: "black",
      range: [0.7, 1]
    },
    {
      value: " Here is the space occupying barrage ",
      color: "black",
      range: [0.7, 0.95]
    },
    {
      value: " High energy warning ahead ！！！",
      color: "orange",
      range: [0.5, 0.8]
    },
    {
      value: " High energy warning ahead ！！！",
      color: "orange",
      range: [0.5, 0.9]
    },
    {
      value: " High energy warning ahead ！！！",
      color: "orange",
      range: [0, 1]
    },
    {
      value: " High energy warning ahead ！！！",
      color: "orange",
      range: [0, 1]
    }
  ];    
//  Barrage method 
  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 = '';

    //  Storage instance 
    var store = {};

    //  Size 
    var fontSize = 12;

    //  Example method 
    var Barrage = function (obj, index) {
      //  Random x Coordinates are abscissa , about y Ordinate , And the amount of change 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;
        //  According to this time x Position draw text 
        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);
    });

    //  Draw barrage text 
    var draw = function () {
      for (var index in store) {
        var barrage = store[index];
        //  Position change 
        barrage.x -= barrage.moveX;
        if (barrage.x < -1 * canvas.width * 1.5) {
          //  When moving to the outside of the canvas, continue to move from the left 
          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;
        }
        //  Draw a circle according to the new position 
        store[index].draw();
      }
    };

    //  Canvas rendering 
    var render = function () {
      //  Clear the canvas 
      context.clearRect(0, 0, canvas.width, canvas.height);

      //  Draw all the circles on the canvas 
      draw();

      //  Continue rendering 
      requestAnimationFrame(render);
    };

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

版权声明
本文为[Tangce]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207261024000379.html

边栏推荐

猜你喜欢

随机推荐