js cavans实现静态滚动弹幕


Posted in Javascript onMay 21, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
javascript中scrollTop详解
Apr 13 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 #Javascript
JavaScript实现HSL拾色器
May 21 #Javascript
js实现拾色器插件(ColorPicker)
May 21 #Javascript
原生js实现日期选择插件
May 21 #Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 #Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 #Javascript
记一次用ts+vuecli4重构项目的实现
May 21 #Javascript
You might like
php创建sprite
2014/02/11 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
详细分析单线程JS执行问题
2017/11/22 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python实现小球弹跳效果
2019/05/10 Python
python 实现目录复制的三种小结
2019/12/04 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
python 读取.nii格式图像实例
2020/07/01 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
日语专业毕业生求职信
2013/12/04 职场文书
先进集体获奖感言
2014/02/13 职场文书
公司晚会主持词
2014/03/22 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
中职生自荐信范文
2014/06/15 职场文书
八年级英语教学计划
2015/01/23 职场文书
考试没考好检讨书
2015/05/06 职场文书
婚礼父母致辞
2015/07/28 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android