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. 【codeforces 24D】损坏的机器人

    题目大意:有一只坏了的机器人站在一个n∗m的网格里,初始位置在(x,y).现在每个单位时间内它会随机选左右下三个方向走,如果它随机的方向会走出网格就不会往这个方向走.当然这个机器人也可能原地停留一个单 ...

  2. 多线程编程，CPU是如何解决多线程内存访问问题的

    CPU对内存变量的修改是先读取内存数据到CPU Cache中,然后再由CPU做运算,运算完成后继续写入到内存中 在单核CPU中,这完全没有问题,然而在多核CPU中,每一个CPU核心都拥有自己独立的Ca ...

  3. (转)MySQL 加锁处理分析

    MySQL 加锁处理分析 原文:http://hedengcheng.com/?p=771 1    背景    1 1.1    MVCC:Snapshot Read vs Current Read ...

  4. jboss5+EJB3+MDB Queue

    在使用jboss5进行MDB的试验时首先要在jboss5中配置jms 队列. 1)在jboss安装目录下:server\default\deploy\messaging 打开destinations- ...

  5. tensorflow基础篇-2

    #-*- coding:utf-8 -*- import tensorflow as tf sess=tf.Session() #整流水线单元relu print sess.run(tf.nn.rel ...

  6. 【数组】Remove Duplicates from Sorted Array II

    题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For ex ...

  7. 11 - JavaSE之GUI

    GUI(念法 gu yi) AWT AWT(Abstract Window Toolkit 抽象窗口开发包,在C# 或者 linux窗口开发类之上又封装一层,达到跨平台的目的)包括了很多类和接口,用于 ...

  8. YAOLEI

    http://www.cnblogs.com/skyblue/p/3356933.html

  9. php中接收参数，不论是来自GET还是POST方法

    不多说,直接上代码, 其实也就是先用GET的方法去获取,如果值为空,在用POST方法去获取 写下来是为了方便和备忘 function getParam($str){       if ( isset( ...

  10. java面试③Web部分

    2.2.1 讲一下http get和post请求的区别 get和post请求都是http的请求方式,用户通过不同的http请求方式完成对资源(url)的不同操作,具体点来讲get一般用于获取/查询资源 ...