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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
Oct 23 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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
提问的智慧(2)
2006/10/09 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
php fread读取文件注意事项
2016/09/24 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
Python使用minidom读写xml的方法
2015/06/03 Python
全面了解python中的类,对象,方法,属性
2016/09/11 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
自我评价如何写好?
2014/01/05 职场文书
施工员岗位职责
2014/03/16 职场文书
大学生安全责任书
2014/07/25 职场文书
2014年纪检工作总结
2014/11/12 职场文书
员工安全责任协议书
2016/03/22 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python