js cavans实现静态滚动弹幕

更新时间：2020年05月21日 15:04:23 作者：唐策

这篇文章主要为大家详细介绍了js cavans实现静态滚动弹幕，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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: "随机循环播放",
  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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
弹幕

escape编码与unescape解码汉字出现乱码的解决方法
这篇文章主要介绍了escape编码与unescape解码汉字出现乱码的解决方法,需要的朋友可以参考下
2014-07-07
layer弹出层 iframe层去掉滚动条的实例代码
今天小编就为大家分享一篇layer弹出层 iframe层去掉滚动条的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
JS中令人发指的valueOf方法介绍
近期月报里提到了valueOf方法,兴致来了翻了下ECMA5里关于valueOf方法的介绍真是令人发指啊,不可思议的朋友可以参考下啊
2013-02-02
教你用js截取字符串开头、结尾及两字符串之间的内容
在js中可以通过indexOf()方法找到指定的字符位置,再使用length属性获得字符串的长度,下面这篇文章主要给大家介绍了关于如何用js截取字符串开头、结尾及两字符串之间的内容的相关资料,需要的朋友可以参考下
2022-11-11
JavaScript 图像动画的小demo
深夜没睡着，起来翻了翻《JavaScript权威指南》这本书，看了下图形动画的demo，学习学习了
2012-05-05
基于JS实现带并发限制的异步调度器
这篇文章主要为大家详细介绍了如何基于JS实现带并发限制的异步调度器，文中的示例代码讲解详细，具有一定的学习价值，需要的可以参考下
2023-05-05
IE6图片加载的一个BUG解决方法
小图整合在一张大图里，然后在不同的CSS里调用同一张图片，以此来减少请求数，这是页面优化最常用的手段，但IE6会对页面里同一个图片，只要在不同的地方有引用到就会重新请求一次，需要加JS代码解决。
2010-07-07
微信小程序如何修改radio和checkbox的默认样式和图标
这篇文章主要介绍了微信小程序修改radio和checkbox的默认样式和图标,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
使用js和canvas实现时钟效果
这篇文章主要为大家详细介绍了使用js和canvas实现时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
javascript屏蔽右键代码
屏蔽右键在某些特殊的情况下还是比较有用的，下面与大家分享个常用的屏蔽方法
2014-05-05

js cavans实现静态滚动弹幕

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具