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的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
js实现不重复导入的方法
Mar 02 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
BootStrap中
Dec 10 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 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文件大小格式化函数合集
2014/03/10 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
jQuery EasyUI API 中文文档 - Spinner微调器使用
2011/10/21 Javascript
jquery获取radio值实例
2014/10/16 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
浅析Python基础-流程控制
2016/03/18 Python
Python简单的制作图片验证码实例
2017/05/31 Python
django中send_mail功能实现详解
2018/02/06 Python
Python logging模块用法示例
2018/08/28 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
银行工作检查书范文
2014/01/31 职场文书
林肯就职演讲稿
2014/05/19 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
期末考试复习计划
2015/01/19 职场文书
岳庙导游词
2015/02/04 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
vue+iview实现手机号分段输入框
2022/03/25 Vue.js