<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<style>

    body{

        overflow: hidden;

        margin: 0;

    }

</style>

</head>

<body>

<canvas id="q"></canvas>

<script>

var s = window.screen;

var width = q.width = s.width;

var height = q.height = s.height;

var letters = Array(256).join(1).split('');

var draw = function () {

  q.getContext('2d').fillStyle='rgba(0,0,0,.05)';

  q.getContext('2d').fillRect(0,0,width,height);

  q.getContext('2d').fillStyle='#0F0';

  letters.map(function(y_pos, index){

    text = String.fromCharCode(34+Math.random()*33);

//    text = String.fromCharCode(3e4+Math.random()*33);//显示中文

    x_pos = index * 10;

    q.getContext('2d').fillText(text, x_pos, y_pos);

    letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;

    q.getContext('2d').fillStyle='#'+letters[index];

  });

};

setInterval(draw, 33);

</script>

</body>

</html>

数字雨（Javascript使用canvas绘制Matrix，效果很赞哦）的更多相关文章

  1. 使用Canvas绘制简单的时钟控件

    Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...

  2. 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  3. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  4. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  5. 使用JavaScript和Canvas打造真实的雨滴效果

    使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...

  6. JavaScript动画基础：canvas绘制简单动画

    动画是将静止的画面变为动态的艺术．实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...

  7. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  8. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  9. js仿黑客帝国文字数字雨效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. MATLAB 的字符串分析

    MATLAB的字符串分析. 字符串实际上是指1Xn 的字符数组. MATLAB软件具有强大的字符串处理功能,提供了很多的字符或字符串处理函数,包括字符串的创建.字符串的属性.比较.查找以及字符串的转换 ...

  2. 使用 Visual Studio 2012进行C语言开发

    1.打开visual studio,选择菜单[文件]->[新建]->[项目],将会弹出新建项目对话框 2.在弹出的新建项目对话框中,选择和填补相应的属性. 3.点击确定之后,会跟着弹出应用 ...

  3. 在php中如何用 union all统计总条数？

    网上使用union all 查询记录总条数的参考资料比较少,所以记录下来,以便有同样需求的人使用. $rs_num = Db::query("select sum(a.b) as num f ...

  4. 统计MSSQL数据库中所有表记录的数量

    SELECT a.name as '表名', b.rows as '记录数' FROM sysobjects AS aINNER JOIN sysindexes AS b ON a.id = b.id ...

  5. Nginx https加密以及nginx日志配置与管理

    Nginx https加密以及nginx日志配置与管理 使用Nginx的优点Nginx作为WEB服务器,Nginx处理静态文件.索引文件.自动索引的效率非常高.Nginx作为代理服务器,Nginx可以 ...

  6. JavaScript之变量、作用域和内存问题

    js中的变量可能包含2种数据类型,基础数据类型和引用数据类型. 一般而言,基本数据类型是数据段,引用数据类型是对象. 保存方式的不同: 基本类型可以直接操作保存在变量中的值:而引用类型真实的值是保存在 ...

  7. 最新 AFNetworking 3.0 简单实用封装

    AFNetworking 3.0 的到来使我们开发者又方便了许多,话不多说,直接上代码. 1.首先 引入框架AFNetworking框架 GitHub下载地址:https://github.com/A ...

  8. PHP 高精度计算

    运行bcsub函数需要 php-bcmath的扩展. Php: BCMath bc是Binary Calculator的缩写.bc*函数的参数都是操作数加上一个可选的 [int scale],比如st ...

  9. Mybatis在IDEA中使用generator逆向工程生成pojo,mapper

    使用mybatis可以逆向生成pojo和mapper文件有很多种方式,我以前用的是mybtais自带的generator包来生成,连接如下:mybatis自己生成pojo 今天我用了IDEA上使用ma ...

  10. php或js判断网站访问者来自手机或者pc端源码

    很多时候也可以通过逻辑程序来进行判断,如PHP.JS是常用的两种识别访问设备类型的常用方法. 原理都是采用识别访问客户端的HTTP_USER_AGENT,然后进行关键字匹配进行确定设备类型,对于伪造H ...