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 EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
jquery带翻页动画的电子杂志代码分享
Aug 21 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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 empty() 检查一个变量是否为空
2011/11/10 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
PHP最常用的正则表达式
2017/02/13 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
类似框架的js代码
2006/11/09 Javascript
js word表格动态添加代码
2010/06/07 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Python深入学习之闭包
2014/08/31 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
python程序需要编译吗
2020/06/19 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
会计专业毕业生自荐书
2014/06/25 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
关于环保的广播稿
2015/12/17 职场文书
python如何读取和存储dict()与.json格式文件
2022/06/25 Python