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. spring源码系列(一)sring源码编译 spring源码下载 spring源码阅读

    想对spring框架进行深入的学习一下,看看源代码,提升和沉淀下自己,工欲善其事必先利其器,还是先搭建环境吧. 环境搭建 sping源码之前是svn管理,现在已经迁移到了github中了,新版本基于g ...

  2. 登录ssh时Host key verification failed错误

    工作中总是测试不同的路由设备, 路由器的ip都是 192.168.111.1 ,ssh登录的时候总是出现这个错误. macos上,错误如下 spawn ssh -p 22 root@192.168.1 ...

  3. 【一天一道LeetCode】#137. Single Number II

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  4. 【Unity技巧】制作一个简单的NPC

    1. 写在前面 前几天看了cgcookie的一个教程,学习了下怎么根据已有人物模型制作一个仿版的NPC人物,感觉挺好玩的,整理一下放到博客里! 先看一下教程里面的最终效果. 是不是很像个幽灵~ 下面是 ...

  5. LAPACK的C/C++接口及代码实例

    今天介绍一个矩阵处理工具LAPACK,她有C\C++接口,可在windows下移植.本人最近正在学习,发现还是还不错滴~ 本博文分为三部分,第一部分介绍LAPACK的安装,这里只介绍最简单的部署:第二 ...

  6. Tomcat如何检测内存泄漏

    一般情况下,如果我们重启web应用是通过重启tomcat的话,则不存在内存泄漏问题.但如果不重启tomcat而对web应用进行重加载则可能会导致内存泄漏,因为重加载后有可能会导致原来的某些内存无法让G ...

  7. JSP标签JSTL(5)--常用的标签函数

    在使用JSTL的标签函数的时候请务必加上如下代码 <!-- 添加jsp标签的核心库 --> <%@ taglib uri="http://java.sun.com/jsp/ ...

  8. UITableViewBase&nbsp;UI_09

    1.UITableView API文档总结:      1.UITableView的父类时,UIScrollView,所以它是可以滚动的,但是只能在竖直方向滚动. 2.UITableView是iOS中 ...

  9. 72【leetcode】经典算法- Lowest Common Ancestor of a Binary Search Tree(lct of bst)

    题目描述: 一个二叉搜索树,给定两个节点a,b,求最小的公共祖先 _______6______ / \ ___2__ ___8__ / \ / \ 0 _4 7 9 / \ 3 5 例如: 2,8 - ...

  10. Java模式之模板方法模式

    当我们遇到的业务逻辑具有大致相同的方式的时候,我们也许就该将这个业务逻辑抽象出来,采用模板方法,来进行封装我们的代码,提高代码的重用性,以及可维护性.下面是我的一个复习用的案例: 第一步:我们需要一个 ...