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 相关文章推荐
javascript鼠标滑动评分控件完整实例
May 13 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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
重置版宣传动画
2020/04/09 魔兽争霸
php的正则处理函数总结分析
2008/06/20 PHP
UCenter中的一个可逆加密函数authcode函数代码
2010/07/20 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
js中cookie的使用详细分析
2008/05/28 Javascript
javascript 避免闭包引发的问题
2009/03/17 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
Python基于list的append和pop方法实现堆栈与队列功能示例
2017/07/24 Python
Python下载网络小说实例代码
2018/02/03 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
pyqt5实现登录界面的模板
2020/05/30 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
大学生的网络创业计划书
2013/12/26 职场文书
网上卖盒饭创业计划书范文
2014/02/07 职场文书
自动一体化专业求职信
2014/03/15 职场文书
品牌转让协议书
2014/08/20 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
地球上的星星观后感
2015/06/02 职场文书