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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
js微信分享接口调用详解
Jul 23 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 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
递归列出所有文件和目录
2006/10/09 PHP
在PHP中执行系统外部命令
2006/10/09 PHP
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP实现简易计算器功能
2020/08/28 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
一个报数游戏js版(约瑟夫环问题)
2010/08/05 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
浅谈webpack组织模块的原理
2018/03/10 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
python爬虫基本知识
2018/03/05 Python
深入了解python列表(LIST)
2020/06/08 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
工厂仓管员岗位职责
2014/01/01 职场文书
给女朋友的道歉信
2014/01/10 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
负责人任命书范本
2014/06/04 职场文书
求职教师自荐书
2014/06/19 职场文书
公司开业主持词
2015/07/02 职场文书
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server