HTMLcanvas矩形阵雨

  • 在画布上执行
  • 获取制图环境
  • 全屏获取屏幕宽度和屏幕高度
  • 确定每个文字的宽度 以确定列
  • 循环输出
  • 定时器调用

HTML 部分

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>HTMLcanvas矩形阵雨</title>

</head>

<body>

<canvas id="c">您的浏览器不支持 请升级</canvas>

</body>

</html>

CSS 部分

<style type="text/css">

/* 基本的复位 */

* {

    margin:0;

    padding:0;

}

/* 给body一个背景 使画布看起来更清晰 */

body {

    background-color:#000;

}

canvas {

    display:block;

}

</style>

Javascript 部分

<script type="text/jscript">

 var c = document.getElementById("c"); //获取id

 var ctx = c.getContext("2d"); //2d制图

 c.width = window.innerWidth; //获取屏幕宽度

 c.height = window.innerHeight; //获取屏幕高度

 var chinese = "abcdefghijklmnopqrstuvwxyz"; //canvas 阵雨文字

 chinese = chinese.split(""); //split 分离

 var font_size = 10; //字体大小 10px

 var columns = c.width/font_size;

 //获取列 屏幕宽度/字体大小

 var drops = []; // drop 落下 新建数组

 for(n=0; n < columns; n++) //控制列输出

     drops[n] = 1;

 //draw

 function draw(){

     ctx.fillStyle = "rgba(0,0,0,0.05)"; //绘制矩形

     ctx.fillRect(0,0,c.width,c.height); //以(0,0)为坐标 画制矩形

     ctx.fillStyle = "#0F0"; //绿色字体

     ctx.font = font_size + "px arial"; //以像素为单位 宋体

     for(var i=0; i< drops.length; i++)

     {

         var text = chinese[Math.floor(Math.random()*chinese.length)];

         // Math.floor 对浮点数向下取整

         ctx.fillText(text, i*font_size, drops[i]*font_size);

         // 规定在画布上输出的文本 开始绘制文本的x坐标 y坐标

         if(drops[i]*font_size > c.height && Math.random() > 0.975)

         // 如果下落的文本大于屏幕高度 或者 随机数大于0.975

             drops[i] = 0;

         // 重置下落

         drops[i]++;

         // 继续执行

     }

 }

 setInterval(draw,33); //33 执行一次draw()

</script>

此文到此结束

我始终相信这个世界上充满了美好与希望 加油！

HTMLcanvas矩形阵雨 - 学习笔记的更多相关文章

  1. OpenCV 学习笔记03 边界框、最小矩形区域和最小闭圆的轮廓

    本节代码使用的opencv-python 4.0.1,numpy 1.15.4 + mkl 使用图片为 Mjolnir_Round_Car_Magnet_300x300.jpg 代码如下: impor ...

  2. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  3. 《Java学习笔记(第8版)》学习指导

    <Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...

  4. AutoCAD学习笔记

    学习笔记: **有些命令,有两到三种执行方式:菜单.命令行.对话框.如layer命令,如果在命令行打入layer命令,就会弹出对话框主y式,如果要命令行方式执行,就需要在前面加一个-号,即-layer ...

  5. 两千行PHP学习笔记

    亲们,如约而至的PHP笔记来啦~绝对干货! 以下为我以前学PHP时做的笔记,时不时的也会添加一些基础知识点进去,有时还翻出来查查. MySQL笔记:一千行MySQL学习笔记http://www.cnb ...

  6. Leonbao：MapKit学习笔记

    以下仅作了解, 实际使用以百度地图居多, 因为百度地图有动态路径规划等接口 MapKit学习笔记    原帖: http://www.cocoachina.com/bbs/read.php?tid-6 ...

  7. Android学习笔记（九）——布局和控件的自定义

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! View是 Android中一种最基本的 UI组件,它可以在屏幕上绘制一块矩形区域,并能响应这块区域的各种事件 ...

  8. opencv学习笔记（三）基本数据类型

    opencv学习笔记(三)基本数据类型 类:DataType 将C++数据类型转换为对应的opencv数据类型 OpenCV原始数据类型的特征模版.OpenCV的原始数据类型包括unsigned ch ...

  9. opencv学习笔记（二）寻找轮廓

    opencv学习笔记(二)寻找轮廓 opencv中使用findContours函数来查找轮廓,这个函数的原型为: void findContours(InputOutputArray image, O ...

随机推荐

  1. 【洛谷mNOIP模拟赛Day1】T1 斐波那契

    题目传送门:https://www.luogu.org/problemnew/show/P3938 这题出得特别吼啊~~ 通过打表或者大胆猜想斐波那契数列的一些性质,我们不难发现对于一只兔子$x$,其 ...

  2. habase 报错 ERROR: Can't get master address from ZooKeeper; znode data == null

    方法一:查看日志报SessionExpiredException: KeeperErrorCode = Session expired for /hbase/master 所以是hbase 和 zoo ...

  3. javascript闭包获取table中tr的索引 分类： JavaScript 2015-05-04 15:10 793人阅读 评论(0) 收藏

    使用javascript闭包获取table标签中tr的索引 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  4. 【数组】Product of Array Except Self

    题目: iven an array of n integers where n > 1, nums, return an array output such that output[i] is ...

  5. 在Windows家里杀死一个偷端口的家伙

    今天,写项目了,写了好多代码,然后运行成功,但是返回的信息啥的还有代码整体的逻辑有点问题,于是就review了代码,改了些东西,然后再次启动服务,但是,问题来了:Address already in ...

  6. 3-nginx.conf参数配置

    –#定义Nginx运行的用户和用户组 –user www www; –#nginx进程数,建议设置为等于CPU总核心数. –worker_processes8; –#全局错误日志定义类型,[ debu ...

  7. Oracle 12c 操作 CDB PDB

    CREATE TRIGGER open_all_pdbs AFTER STARTUP ON DATABASE BEGIN EXECUTE IMMEDIATE 'alter pluggable data ...

  8. SSH和SSL比较

    一.SSH介绍 什么是SSH? 传统的网络服务程序,如:ftp.pop和telnet在本质上都是不安全的,因为它们在网络上用明文传送口令和数据, 别有用心的人非常容易就可以截 获这些口令和数据.而且, ...

  9. SSL虚拟主机安全方案

    SSL虚拟主机安全方案 随着虚拟主机技术的发展,功能越来越丰富,已经不仅仅只是满足个人网站的需要,越来越多的小型电子商务网站也采用了虚拟主机来建站,如何为这些商户提供经济.方便的SSL解决方案,成为虚 ...

  10. firefox native extension -- har export trigger

    这两天想学习下如何在运行自动化脚本时去capture http traffic,google看到一篇博客介绍用browser mob proxy或者firefox+firebug+netexport, ...