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. cobbler 自定义私有yum源

    目的:为客户端自动添加上yum源 以下以openstack源为例 1.新建私有yum源[root@localhost ~]#cobbler repo add --name=openstack-mita ...

  2. OS之进程管理---实时CPU调度

    引言 一般来说,我们将实时操作系统区分为软实时系统(soft real-time system)和硬实时系统(hard real-time system).软实时系统不保证会调度关键实时进程,而只保证 ...

  3. POJ 1083

    #include<iostream> #include<stdio.h> #include<algorithm> #define MAXN 400 using na ...

  4. Java中equals，hashcode

         在Java语言中,Object对象中包含一个equals和hashCode方法,其中hashCode方法是由JVM本地代码(native code)实现的,返回值是一个有符号的32位整数,对 ...

  5. reCaptcha for ASP.NET

    使用reCaptcha for asp.net library,以前一直工作正常,最近发现运行不正常了,google到了一个解决方案,不适用control而直接使用api,代码如下: markup: ...

  6. [WiX]Component Rules 101

    原文:http://robmensching.com/blog/posts/2003/10/18/component-rules-101 I've been debating with myself ...

  7. android Service 学习总结

    学习android开发已经四五个月,由于项目中职责的原因一直没有接触过Service的实际项目,今天重新学一遍Service用法. 问题: 作为四大组件,为什么需要Service? 它与Thread又 ...

  8. javascript闭包使用 分类： JavaScript 2015-05-01 11:34 652人阅读 评论(3) 收藏

    之前看到一段代码,很是不能理解,然后就查找资料并且找网络上得大牛请教,最后弄懂了这段代码,然后就拿出来总结一下. 1.挖坑 先来看一段代码: var arrTest = []; for (var i ...

  9. 【数组】Search a 2D Matrix

    题目: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the f ...

  10. pict总结

    pict总结 pict总结 Friday, September 25, 2015 12:03 PM pict:微软出品的一个自动生成case工具,运用组合测试方法 1 pict安装 2 pict环境变 ...