canvas实现黑客帝国效果

效果图：

代码实现：

1.html结构

<canvas id="mom" style="background:#000"></canvas>

2.获取canvas上下文对象及宽高

var canvas=document.getElementById('mom');
var ctx=canvas.getContext('2d');
var w=window.innerWidth;
var h=window.innerHeight;
canvas.width=w;
canvas.height=h;

3.数组存放位置信息

var fontSize=16;
var colunms=Math.floor(w/fontSize);
var drops=[];/* 数组用来存放canvas中文字的Y值 更新位置*/
for(var i=0;i<colunms;i++){drops.push(0);//规定初始时从页面最顶端下来// console.log(drops);
}
var str="CANVAS Javascript";

4.开始绘制

function draw(){ctx.fillStyle='rgba(0,0,0,0.05)';/* 背景颜色 */// 由于页面在反复调用这个draw方法，透明度也在叠加，使里面的文字颜色也有变化，所有看起来感觉有3D的感觉，有层次感。ctx.fillRect(0,0,w,h);ctx.font="700 "+fontSize+"px 微软雅黑";/* 字体颜色 */ctx.fillStyle="#00cc33";    //写入画布for(var i=0;i<colunms;i++){var index=Math.floor(Math.random()*str.length);var x=i*fontSize;var y=drops[i]*fontSize;ctx.fillText(str[index],x,y);if(y>=canvas.height&&Math.random()>0.99){// 0.99的随机数造成列消失的时间不一致，产生的列也随之改变drops[i]=0;//超出高度回到起点}drops[i]++;}
}

5.设置定时器

draw();
setInterval(draw,20);

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>黑客帝国</title><style>*{margin: 0;padding: 0;}body{overflow: hidden;}</style>
</head>
<body><canvas id="mom" style="background:#000"></canvas><script>var canvas=document.getElementById('mom');var ctx=canvas.getContext('2d');var w=window.innerWidth;var h=window.innerHeight;canvas.width=w;canvas.height=h;var fontSize=16;var colunms=Math.floor(w/fontSize);var drops=[];/* 数组用来存放canvas中文字的Y值 更新位置*/console.log(drops);for(var i=0;i<colunms;i++){drops.push(0);//规定初始时从页面最顶端下来}var str="CANVAS Javascript";draw();setInterval(draw,20);function draw(){ctx.fillStyle='rgba(0,0,0,0.05)';/* 背景颜色 */// 由于页面在反复调用这个draw方法，透明度也在叠加，使里面的文字颜色也有变化，所有看起来感觉有3D的感觉，有层次感。ctx.fillRect(0,0,w,h);ctx.font="700 "+fontSize+"px 微软雅黑";/* 字体颜色 */ctx.fillStyle="#00cc33";//写入画布for(var i=0;i<colunms;i++){var index=Math.floor(Math.random()*str.length);var x=i*fontSize;var y=drops[i]*fontSize;ctx.fillText(str[index],x,y);if(y>=canvas.height&&Math.random()>0.99){// 0.99的随机数造成列消失的时间不一致，产生的列也随之改变drops[i]=0;//超出高度回到起点// console.log(drops)}drops[i]++;}}</script>
</body>
</html>

参考：http://www.cnblogs.com/chedabang/p/6291504.html

canvas实现黑客帝国效果相关推荐

canvas动画:黑客帝国_使用Canvas API进行动画处理-第3部分：重力和动态渲染
canvas动画:黑客帝国 Over in Part 2 of this series we created a ball that would ricochet around the screen ...
html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
原生js实现canvas气泡冒泡效果
说明: 本文章主要分为ES5和ES6两个版本 ES5版本是早期版本,后面用ES6重写优化的,建议使用ES6版本. 1, 原生js实现canvas气泡冒泡效果的插件,api丰富,使用简单 2, 只需引入 ...
Js黑客帝国效果文字下落制作过程和思路
效果预览: http://jsfiddle.net/dtdxrk/m8R6b/embedded/result/ Js黑客帝国效果文字向下落制作过程和思路 1.css控制文字竖显示 2.动态添加div ...
java做橡皮擦效果_HTML5 canvas橡皮擦擦拭效果
这是一款HTML5 canvas橡皮擦擦拭效果.该效果通过canvas来制作遮罩层和擦拭用的橡皮擦,用户可以通过移动鼠标来移除遮罩层,效果非常炫酷. 因为发代码有时会排版混乱,所以先发图演示了.源码已 ...
鼠标点击特效：canvas点击效果
JS代码(代码中包含了sketch.min.js的源码,如果你的网站已经引用了,请删掉下面的6到7行.): /** 鼠标点击特效:canvas点击效果*/ /* Copyright (C) 2013 ...
canvas实现涂鸦效果--橡皮檫和历史记录
利用canvas实现涂鸦效果,包括更换笔触大小颜色.换背景图.橡皮檫.历史记录.清屏等功能,并能保存涂鸦图片到本地. 由于篇幅问题,本文主要实现橡皮檫和历史记录功能,该部分功能不操作背景图片,最终效果 ...
canvas实现聚光灯效果（js）
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
html鼠标拖尾效果,javascript canvas拖尾效果
{$title} var lujinglist = []; //制作路径 for (var x = 10; x <= 300; x++) { var dian = [x, 50]; lujing ...

canvas实现黑客帝国效果

效果图：

代码实现：

1.html结构

2.获取canvas上下文对象及宽高

3.数组存放位置信息

4.开始绘制

5.设置定时器

完整代码：

canvas实现黑客帝国效果相关推荐

最新文章

热门文章