数字雨(Javascript使用canvas绘制Matrix,效果很赞哦)
<!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,效果很赞哦)的更多相关文章
- 使用Canvas绘制简单的时钟控件
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等. 没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和F ...
- 【朝花夕拾】Android自定义View篇之(三)Canvas绘制文字
前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...
- 使用 HTML5 Canvas 绘制出惊艳的水滴效果
HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...
- 使用 Canvas 和 JavaScript 创建逼真的下雨效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...
- 使用JavaScript和Canvas打造真实的雨滴效果
使用JavaScript和Canvas打造真实的雨滴效果 寸志 · 1 年前 我最近搞了一个有趣的项目——rainyday.js .我认为这个项目并不怎么样,而且,事实上这是我第一次尝试接触一些比弹窗 ...
- JavaScript动画基础:canvas绘制简单动画
动画是将静止的画面变为动态的艺术.实现由静止到动态,主要是靠人眼的视觉残留效应.视觉残留也叫视觉暂留现象,物体在快速运动时, 当人眼所看到的影像消失后,人眼仍能继续保留其影像0.1~0.4秒左右的图像 ...
- 怎样用JavaScript和HTML5 Canvas绘制图表
原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...
- Android自定义控件 -Canvas绘制折线图(实现动态报表效果)
有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...
- js仿黑客帝国文字数字雨效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Android创建JSON格式数据
Android创建JSON格式数据 作为上一篇博客的补充,简单那解说了一下Android创建JSON格式数据的小Demo. 1. 创建JSON格式数据 对于Android创建JSON格式数据.因为An ...
- 动态加载script 和 link
1.script EventUtil.addHandler(window, "load", function(event){ var script = document.creat ...
- ubuntu 环境变量PATH的修改
sudo nano /etc/environment 环 境变量是和Shell紧密相关的,用户登录系统后就启动了一个Shell.对于Linux来说一般是bash,但也可以重新设定或切换到其它的 She ...
- Win 7+Anaconda+tensorflow
Anaconda是一种拥有各种Python库的集成环境,也支持Windows.Mac和Linux系统. 1.安装 Anaconda 安装包:https://www.continuum.io/downl ...
- SQl查询数据库表名、表的列名、数据类型、主键
1.获取所有数据库名: 2.Select Name FROM Master..SysDatabases order by Name 3. 4.2.获取所有表名: 5. (1) ...
- Linux Chrome Tab 标题 乱码
1. 刚装完ubuntu 14.04 英文版, 又装了google chrome 浏览器. 2. 打开chrome浏览器,发现tab也没的标题是乱码: 3. 而系统自带的firefox却没有这个问题, ...
- MII、GMII、RMII、SGMII、XGMII
MII即媒体独立接口,也叫介质无关接口.它是IEEE-802.3定义的以太网行业标准.它包括一个数据接口,以及一个MAC和PHY之间的管理接口(图1). 数据接口包括分别用于发送器和接收器的两条独立信 ...
- SpringBoot整合Quartz
1.引入quzrtz <dependency> <groupId>org.quartz-scheduler</groupId> <artifactId> ...
- TPM概述
TPM(Trusted Platform Module)安全芯片,是指符合TPM(可信赖平台模块)标准的安全芯片.标准由TCG(可信赖计算组织,Trusted Computing Group)提出,目 ...
- LeetCode532. K-diff Pairs in an Array
Description Given an array of integers and an integer k, you need to find the number of unique k-dif ...