js cavans實現靜態滾動彈幕

阿新 • • 發佈：2020-05-23

本文例項為大家分享了js實現靜態滾動彈幕的具體程式碼，供大家參考，具體內容如下

<!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: "隨機迴圈播放",0.6]
 },{
  value: "可以控制區域和垂直分佈範圍",{
  value: "字型大小和速度在方法內設定",color: "black",range: [0.1,1]
 },{
  value: "適合用在一些靜態頁面上",range: [0.2,{
  value: "基於canvas實現",0.9]
 },{
  value: "因此IE9+瀏覽器才支援",{
  value: "可以設定邊框顏色",{
  value: "文字顏色預設都是白色",{
  value: "若文字顏色不想白色",{
  value: "需要自己調整下JS",range: [0.6,0.7]
 },{
  value: "如果需要的是真實和視訊互動的彈幕",{
  value: "可以回到原文",{
  value: "檢視另外一個demo",range: [0.7,{
  value: "下面就是佔位彈幕了",0.95]
 },{
  value: "前方高能預警！！！",color: "orange",range: [0.5,0.8]
 },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," + this.opacity + ")";
  context.fillText(params.value,this.x,this.y);
  context.strokeText(params.value,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,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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。