1、加入canvas标签

<!DOCTYPE html>

<html>

   <head>
          <meta charset="UTF-8"/>
          <meta name="Authar" content="木人子韦一日尘" />

          <title>数据下下下……</title>

          <style>

              #canvas{

                        background-color:black;

                     }

          </style>

   </head>

   <body>

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

       <script>

           //通过id获取canvas标签

           var canvas=document.getElementById("canvas");

           //设置尺寸大小

           //屏幕

           var s=window.screen;

           //屏幕长度

           var w=canvas.width=s.width;

           //屏幕高度

           var h=canvas.height=s.height;

       </script>

   </body>

</html>

不出意外的话，效果应该是黑屏

2、长话不说，代码聊天

<!DOCTYPE html>

<html>

   <head>

          <meta charset="UTF-8"/>

          <meta name="Authar" content="木人子韦一日尘" />

          <title>数据下下下……</title>

          <style>

              #canvas{

                        background-color:black;

                     }

          </style>

   </head>

   <body>

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

       <script>

           //通过id获取canvas标签

           var canvas=document.getElementById("canvas");

           //设置尺寸大小

           //屏幕

           var s=window.screen;

           //屏幕长度

           var w=canvas.width=s.width;

           //屏幕高度

           var h=canvas.height=s.height;

		   //定义画板里的画笔

		   var ctx=canvas.getContext("2d");

		   //定义数组，256个子集，且都是一样的数字

		   var array=Array(256).join("1").split("");//join是把数组的子集们连接成字符串，split是把字符串分割成数组

		   //因为页面类似动图，就是每一秒中，页面都会发生改变，所以我需要一个函数

		   function gif(){

		       //数据是什么？记录的字符串，接下来是给画板添加文本，设置文本所在

			   //遍历array一遍，每个文字的位置随着数组下标而变化

			   array.map(function(item,index){

				   ctx.fillStyle="red";

			       //item是数组下标所对应的数据，index是数组下标

				   var text=String.fromCharCode(Math.ceil(Math.random()*1000));//随机的文字，添加在所处的位置

				   ctx.fillText(text,index*10,100);//ctx.fillText(text,x,y);text是指所添加的文字，x是x坐标，y是y坐标

			   })

		   }

		   gif();

       </script>

   </body>

</html>

　　看着像梵语

3、接下来是满脸梵语

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="Authar" content="木人子韦一日尘" />
<title>数据下下下……</title>
<style>
#canvas{
background-color:black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//通过id获取canvas标签
var canvas=document.getElementById("canvas");
//设置尺寸大小
//屏幕
var s=window.screen;
//屏幕长度
var w=canvas.width=s.width;
//屏幕高度
var h=canvas.height=s.height;
//定义画板里的画笔
var ctx=canvas.getContext("2d");
//定义数组，256个子集，且都是一样的数字
var array=Array(256).join("1").split("");//join是把数组的子集们连接成字符串，split是把字符串分割成数组
//因为页面类似动图，就是每一秒中，页面都会发生改变，所以我需要一个函数
function gif(){
//数据是什么？记录的字符串，接下来是给画板添加文本，设置文本所在
//遍历array一遍，每个文字的位置随着数组下标而变化
array.map(function(item,index){
ctx.fillStyle="red";
//item是数组下标所对应的数据，index是数组下标
var text=String.fromCharCode(Math.ceil(Math.random()*1000));//根据URL转码随机的文字，添加在所处的位置
ctx.fillText(text,index*10,item);//ctx.fillText(text,x,y);text是指所添加的文字，x是x坐标，y是y坐标
array[index]=(item>700+Math.random()*400)?0:item+10;
})
}
//每隔50ms改变一次页面，简单就是性能50ms，借用定时器
setInterval(gif,50);
</script>
</body>
</html>

 

4、颜色单调，很孤独，所以专制一个随机颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="Authar" content="木人子韦一日尘" />
<title>数据下下下……</title>
<style>
#canvas{
background-color:black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//通过id获取canvas标签
var canvas=document.getElementById("canvas");
//设置尺寸大小
//屏幕
var s=window.screen;
//屏幕长度
var w=canvas.width=s.width;
//屏幕高度
var h=canvas.height=s.height;
//定义画板里的画笔
var ctx=canvas.getContext("2d");
//定义数组，256个子集，且都是一样的数字
var array=Array(256).join("1").split("");//join是把数组的子集们连接成字符串，split是把字符串分割成数组
//因为页面类似动图，就是每一秒中，页面都会发生改变，所以我需要一个函数
function gif(){
//数据是什么？记录的字符串，接下来是给画板添加文本，设置文本所在
//遍历array一遍，每个文字的位置随着数组下标而变化
array.map(function(item,index){
ctx.fillStyle=colors();
//item是数组下标所对应的数据，index是数组下标
var text=String.fromCharCode(Math.ceil(Math.random()*1000));//根据URL转码随机的文字，添加在所处的位置
ctx.fillText(text,index*10,item);//ctx.fillText(text,x,y);text是指所添加的文字，x是x坐标，y是y坐标
array[index]=(item>700+Math.random()*400)?0:item+10;//修改每个子集的y坐标，且y坐标有范围
})
}
//十六进制的颜色
function colors(){
var color=Math.ceil(Math.random()*16777215).toString(16);//toString(16)将十进制转为十六进制
//当color不足六位数时，前面补0；
while(color.length<6){color="0"+color;}
return "#"+color;
}
//每隔50ms改变一次页面，简单就是性能50ms，借用定时器
setInterval(gif,50);
</script>
</body>
</html>

　　

5、每一秒的变化不仅仅只能这些，还需要继续

<!DOCTYPE html>

<html>

   <head>

          <meta charset="UTF-8"/>

          <meta name="Authar" content="木人子韦一日尘" />

          <title>数据下下下……</title>

          <style>

              #canvas{

                        background-color:black;

                     }

          </style>

   </head>

   <body>

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

       <script>

           //通过id获取canvas标签

           var canvas=document.getElementById("canvas");

           //设置尺寸大小

           //屏幕

           var s=window.screen;

           //屏幕长度

           var w=canvas.width=s.width;

           //屏幕高度

           var h=canvas.height=s.height;

		   //定义画板里的画笔

		   var ctx=canvas.getContext("2d");

		   //定义数组，256个子集，且都是一样的数字

		   var array=Array(256).join("1").split("");//join是把数组的子集们连接成字符串，split是把字符串分割成数组

		   //因为页面类似动图，就是每一秒中，页面都会发生改变，所以我需要一个函数

		   function gif(){

			   //覆盖上一次的绘画

			   ctx.fillStyle="rgba(0,0,0,0.05)";

			   ctx.fillRect(0,0,w,h);

		       //数据是什么？记录的字符串，接下来是给画板添加文本，设置文本所在

			   //遍历array一遍，每个文字的位置随着数组下标而变化

			   array.map(function(item,index){

				   ctx.fillStyle=colors();

			       //item是数组下标所对应的数据，index是数组下标

				   var text=String.fromCharCode(Math.ceil(Math.random()*1000));//根据URL转码随机的文字，添加在所处的位置

				   ctx.fillText(text,index*10,item);//ctx.fillText(text,x,y);text是指所添加的文字，x是x坐标，y是y坐标

				   array[index]=(item>700+Math.random()*400)?0:item+10;//修改每个子集的y坐标，且y坐标有范围

			   })

		   }

		   //十六进制的颜色

		   function colors(){

		       var color=Math.ceil(Math.random()*16777215).toString(16);//toString(16)将十进制转为十六进制

			   //当color不足六位数时，前面补0；

			   while(color.length<6){color="0"+color;}

			   return "#"+color;

		   }

		   //每隔50ms改变一次页面，简单就是性能50ms，借用定时器

		   setInterval(gif,50);

       </script>

   </body>

</html>

　　

6、做到这完成了

大哥大姐们，我是个新人，知识点不够全面，如果写的不好的话，此代码就只提供看看用

HTML5的canvas标签制作黑客帝国里的简单画面的更多相关文章

  1. HTML5新增Canvas标签及对应属性、API详解（基础一）

    知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...

  2. H5中canvas标签制作在线画板

    1.介绍 左键点击下移动开始画图.放开鼠标不在画图. 2.重要使用理论 query的使用: 鼠标的按下mousedown 鼠标的移动mousemove 鼠标的放开 mouseup 3.程序 <! ...

  3. HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点

    用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...

  4. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  5. HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)

    什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...

  6. html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  7. [html5] 学习笔记-Canvas标签的使用

    Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...

  8. HTML5的新标签之一的Canvas

    一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas>  英 ['kænvəs]  美 [ ...

  9. HTML5<canvas>标签:简单介绍(0)

    <canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与c ...

随机推荐

  1. 深入解剖unsigned int 和 int

    就如同int a:一样,int 也能被其它的修饰符修饰.除void类型外,基本数据类型之前都可以加各种类型修饰符,类型修饰符有如下四种: 1.signed----有符号,可修饰char.int.Int ...

  2. Centos中git的安装

     CentOS的yum源中没有git,只能自己编译安装,现在记录下编译安装的内容,留给自己备忘. 确保已安装了依赖的包 yum install curl yum install curl-deve ...

  3. Uva - 514 - Rails

    C是一个栈,每次先检查A的第一个元素是否满足,如果满足,直接进入B:再检查C中栈顶元素是否满足,如果满足,出栈进入B:前两步都不满足将A放入C栈中.循环到B满或者A,C中都不满足条件并且A空,第一种情 ...

  4. pig简单的代码实例：报表统计行业中的点击和曝光量

    注意:pig中用run或者exec 运行脚本.除了cd和ls,其他命令不用.在本代码中用rm和mv命令做例子,容易出错. 另外,pig只有在store或dump时候才会真正加载数据,否则,只是加载代码 ...

  5. (Tomcat)服务器之web应用的虚拟目录映射和主机搭建

    首先来了解一下web的虚拟目录映射和主机搭建的知识 第一:web的虚拟目录映射 首先我们要知道什么叫做web的虚拟目录映射,这个很好理解的,就是将我们本地硬盘上的web应用映射出一个供外界用户访问的地 ...

  6. Java 8新特性探究（三）泛型的目标类型推断

    简单理解泛型 泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.通俗点将就是"类型的变量".这种类型变量可以用在类.接口和方法 ...

  7. Android View事件机制一些事

    本文主要讲述: 自己对View事件机制的一些理解 在项目中遇到的一些坑,解决方案 收集了一些View的事件机制问题 事件的分发原理图 对于一个root viewgroup来说,如果接受了一个点击事件, ...

  8. Swift基础之UITextField

    //设置全局变量,将下面的替换即可     //var myTextField = UITextField();     //系统生成的viewDidLoad()方法     override fun ...

  9. Java-clone总结

    纸上得来终觉浅,绝知此事要躬行  --陆游    问渠那得清如许,为有源头活水来  --朱熹 clone和Copy:当有一个对象Person p1=new Person("name" ...

  10. 支持老版本IE的3种解决方案

    原文链接: 3 Solutions for Supporting Internet Explorer 翻译人员: 铁锚 翻译时间: 2014年2月14日 在刚发布的那几年,Internet Explo ...