HTML5的canvas标签制作黑客帝国里的简单画面
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标签制作黑客帝国里的简单画面的更多相关文章
- HTML5新增Canvas标签及对应属性、API详解（基础一）
知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签 ...
- H5中canvas标签制作在线画板
1.介绍 左键点击下移动开始画图.放开鼠标不在画图. 2.重要使用理论 query的使用: 鼠标的按下mousedown 鼠标的移动mousemove 鼠标的放开 mouseup 3.程序 <! ...
- HTML5 canvas标签绘制正三角形 鼠标按下点为中间点，鼠标抬起点为其中一个顶点
用html5的canvas标签绘制圆.矩形比较容易,绘制三角形,坐标确定相当于前面两种难点,这里绘制的是正三角形,比较容易,我们只需要把鼠标刚按下去的点设置为三角形的中心点,鼠标抬起的点设置为三角形右 ...
- HTML5之Canvas时钟(网页效果--每日一更)
今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...
- HTML5<canvas>标签:使用canvas元素在网页上绘制线条和圆(1)
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- html5之canvas困惑 在canvas标签内需要设置了宽跟高，如果在css中设置同样的宽跟高，画出来的图像变形了？
<canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...
- [html5] 学习笔记-Canvas标签的使用
Canvas通过JavaScript来绘制2D图形.Canvas是逐像素渲染的.在Canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注.如果其位置发生变化,那么整个场景也需要重新绘制,包括 ...
- HTML5的新标签之一的Canvas
一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 [ ...
- HTML5<canvas>标签:简单介绍(0)
<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与c ...
随机推荐
- Centos6.6上源码安装Nodejs V4版本
本来就是想在vps上装一个Ghost博客,这个博客依赖的是Nodejs,然后推荐的是V4版本.然后我就对着官网的步骤安装,发现根本没有Centos6 i386的资源了(64位的还是有的), 我只能在那 ...
- Android开发优化之——使用软引用和弱引用
Java从JDK1.2版本开始,就把对象的引用分为四种级别,从而使程序能更加灵活的控制对象的生命周期.这四种级别由高到低依次为:强引用.软引用.弱引用和虚引用. 这里重点介绍一下软引用和弱引用. 如果 ...
- 解决android 大图OOM的两种方法
最近做程序中,需要用到一张大图.这张图片是2880*2180大小的,在我开发所用的华为3C手机上显示没有问题,但是给米3装的时候,一打开马上报OOM错误.给nexus5装,则是图片无法出来,DDMS中 ...
- SDL2源代码分析5：更新纹理（SDL_UpdateTexture()）
===================================================== SDL源代码分析系列文章列表: SDL2源代码分析1:初始化(SDL_Init()) SDL ...
- SDL2源代码分析3：渲染器（SDL_Renderer）
===================================================== SDL源代码分析系列文章列表: SDL2源代码分析1:初始化(SDL_Init()) SDL ...
- STL：STL各种容器的使用时机详解
C++标准程序库提供了各具特长的不同容器.现在的问题是:该如何选择最佳的容器类别?下表给出了概述. 但是其中有些描述可能不一定实际.例如:如果你需呀处理的元素数量很少,可以虎落复杂度,因为线性算法通常 ...
- 类装载器DexClassLoader （android内核剖析）
在java环境中,有个概念叫做"类装载器",其作用是动态装载Class文件.标准的java SDK中有一个ClassLoader类,借助它可以装载 想要的Class文件,每个Cla ...
- OJ题：成绩排序
题目描述 查找和排序 题目:输入任意(用户,成绩)序列,可以获得成绩从高到低或从低到高的排列,相同成绩 都按先录入排列在前的规则处理. 例示: jack 70 peter 96 Tom 70 smit ...
- UVa - 1616 - Caravan Robbers
二分找到最大长度,最后输出的时候转化成分数,比较有技巧性. AC代码: #include <iostream> #include <cstdio> #include <c ...
- MinerQueue.java 访问队列
MinerQueue.java 访问队列 package com.iteye.injavawetrust.miner; import java.util.HashSet; import java.ut ...