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. C语言的组成 以及预编译

    这么多年过去了,回头再来学习一下C语言,发现很多不一样的感觉 #include <stdio.h> int main(int argc, const char * argv[]) { pr ...

  2. JMeter性能测试-服务器资源监控插件详解

          零.引言 我们对被测应用进行性能测试时,除了关注吞吐量.响应时间等应用自身的表现外,对应用运行所涉及的服务器资源的使用情况,也是非常重要的方面,通过实时监控,可以准确的把握不同测试场景下服 ...

  3. 使用win10自带邮件应用发送文件

    之前的电脑装过邮件客户端,想发送文件给别人时,只需要“右键文件——发送到邮件”,就能把文件作为附件发送给对方.新电脑win10系统自带邮件客户端,所以就想直接用.但是右键发送到邮件没有关联上,用不了. ...

  4. 基于ajax 的 几个例子 session ,ajax 实现登录,验证码 ,实现ajax表单展示

    headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},data:$(". ...

  5. iOS 设置textfield的最大文本长度

    //在现实开发中  需要控制文本输入长度 并实时做短信验证,代码如下 [self.textField addTarget:self action:@selector(codeChange:) forC ...

  6. 剑指offer四十六之孩子们的游戏(圆圈中最后剩下的数，约瑟夫环问题)

    一.题目 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...

  7. 安装Hive-0.10.0-CDH4.5.0所遇异常

    Note: 虚拟机访问Win7中mysql(root用户+密码) hive出现异常1: FAILED: Error in metadata: java.lang.RuntimeException: U ...

  8. Java之集合(十二)TreeMap

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7411935.html 1.前言 本章介绍Map体系中的TreeMap,顾名思义,这个是一个树结构的Map.Tre ...

  9. 忘记mysql密码的解决办法--针对windows系统

    C:\Users\Administrator>cd C:\Program Files\MySQL\MySQL Server 5.5\bin C:\Program Files\MySQL\MySQ ...

  10. Windows Server2016服务器系统创建域服务器

    原先是有图片,因为图片是直接粘贴上来的,发布之后图片都看见了,然后都使用上传图片的方式才搞定,这也是博客园比较坑的地方: 也可以查看该链接含图片: http://www.cnblogs.com/all ...