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操作JSON实例代码
Feb 09 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
js字符串倒序的实例代码
Nov 30 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
详解vue axios中文文档
2017/09/12 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
教师爱岗敬业演讲稿
2014/05/05 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
创业计划书之便利店
2019/09/05 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android
nginx容器方式反向代理实战
2022/04/18 Servers