JavaScript canvas仿代码流瀑布


Posted in Javascript onFebruary 10, 2020

本文实例为大家分享了canvas仿代码流瀑布的具体代码,供大家参考,具体内容如下

JavaScript canvas仿代码流瀑布

在js部分写canvas代码,有详细注释

html部分:

一个canvas元素:

<canvas id="canvas" ></canvas>

css部分:

<style>
  *{
   padding: 0;
   margin: 0;
  }
  canvas{
   background-color: #111;
  }
  body{
   overflow: hidden;
  
  }
</style>
<script>
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  // 获取浏览器的宽度和高度
  var w = window.innerWidth;
  var h = window.innerHeight;
  // 设置canvas的宽高
  canvas.width = w;
  canvas.height = h;
  // 每个文字的大小
  var fontSize = 16;
  // 一共可以有多少列文字
  var col = Math.floor(w / fontSize);
  // 记录每列文字的y轴坐标
  var cpy = [];
  for(var i = 0;i< col; i++)
  {
   cpy[i] = 1;
  }
  //定义文字
  var str = "Javascriphafhsdhfsfsf{}";
  // 绘制
  draw();
  setInterval(draw,30);
  function draw(){
   context.beginPath();
   // 背景填充颜色
   context.fillStyle = "rgba(0,0,0,0.05)";
   context.fillRect(0,0,w,h);
   // 设置字体大小
   context.font = fontSize +"px bold 微软雅黑 ";
   // 设置字体颜色
   context.fillStyle = "#00cc33";
   for(var i = 0; i < col;i++)
   {
    var index = Math.floor(Math.random()*str.length);
    var x = i*fontSize;
    var y = cpy[i]*fontSize;
    context.fillText(str.charAt(index),x,y);
    if(y >= h && Math.random()> 0.99)// 出现时间延迟的效果
    {
     cpy[i]=0;// 只要Math.random> 0.99 时才纵坐标从0开始写字
    }
    cpy[i]++;// 数组值加一,以便下一次写的字在下面一行
   }
  }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
详解如何使用 vue-cli 开发多页应用
Dec 16 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
Vue数字输入框组件使用方法详解
Feb 10 #Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 #Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 #Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 #Javascript
node.js中 redis 的安装和基本操作示例
Feb 10 #Javascript
js实现登录拖拽窗口
Feb 10 #Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 #Javascript
You might like
PHP获取网卡地址的代码
2008/04/09 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
php给图片加文字水印
2015/07/31 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
js导出格式化的excel 实例方法
2013/07/17 Javascript
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
深入了解python列表(LIST)
2020/06/08 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
学年自我鉴定范文
2013/10/01 职场文书
航空大学应届生求职信
2013/11/10 职场文书
给老师的检讨书
2014/02/11 职场文书
一年级小学生评语大全
2014/12/25 职场文书
支教个人总结
2015/03/04 职场文书
团委副书记工作总结
2015/08/14 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers