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判断函数
Aug 14 Javascript
jquery中get和post的简单实例
Feb 04 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
Dec 01 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
JavaScript实现滚动加载更多
Dec 27 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程序时遇到的三个问题
2012/01/17 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
jquery DataTable实现前后台动态分页
2017/06/17 jQuery
Vue2.0如何发布项目实战
2017/07/27 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
使用Python求解最大公约数的实现方法
2015/08/20 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
Python调用Redis的示例代码
2020/11/24 Python
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
保密承诺书范文
2014/03/27 职场文书
文明寄语大全
2014/04/11 职场文书
环保标语大全
2014/06/12 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
自主招生自荐信怎么写
2015/03/24 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
Python torch.flatten()函数案例详解
2021/08/30 Python
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis
Linux中各个目录的作用与内容
2022/06/28 Servers