HTML5 canvas 瀑布流文字 (骇客帝国效果）

转自： http://www.gbtags.com/gb/rtreplayer/1380.htm （极限标签）

一、效果图

【html】

<div id="container">
<canvas id="c"></canvas>
</div>

<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

【css】
/*CSS源代码*/
*{
padding: 0;
margin: 0;
}
body{
background:#000;
}

【javascript】
/*Javascript代码片段*/
var c = document.getElementById("c");
var ctx = c.getContext("2d");

//制作全屏
c.height = window.innerHeight;
c.width = window.innerWidth;

//汉字从Unicode字符集
var chinese = "极客标签！~";
//将字符串转换为一个数组中的单个字符
chinese = chinese.split("");

var font_size = 20;
var columns = c.width/font_size; //雨的列数
//每列的一个数组
var drops = [];
//下面是×坐标
//1 = y 在下降（最初是相同的）
for(var x = 0; x < columns; x++)
drops[x] = 1;

//画
function draw()
{
//黑BG的帆布
//半透明BG显示轨迹
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);

ctx.fillStyle = "#0F0"; //字体颜色
ctx.font = font_size + "px arial";
//循环字体
for(var i = 0; i < drops.length; i++)
{
//随机汉字打印
var text = chinese[Math.floor(Math.random()*chinese.length)];
//x = i*font_size, y = value of drops[i]*font_size
ctx.fillText(text, i*font_size, drops[i]*font_size);

//在屏幕上划线后，把它的顶部随机发送到顶部
//将一个随机性添加到复位中，使分散在轴上的下降
if(drops[i]*font_size > c.height && Math.random() > 0.975)
drops[i] = 0;

//增加的Y坐标
drops[i]++;
}
}

setInterval(draw, 33);

HTML5 canvas 瀑布流文字 (骇客帝国效果）相关推荐

html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
html弧形列表效果,JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { margin:50 ...
html5实现瀑布流效果
先给出极客学院的一个瀑布流小例程:瀑布流demo.这是个实现瀑布流很典型的demo.这个例子的实现思路是这样的:父级元素container采用相对定位,子元素container使用绝对定位,用函数im ...
HTML5 Canvas中实现文字链接
HTML5中没有关于链接的API,所以我们只有自己来实现了. 首先,我们来想一下,链接有什么特点.第一个想到的估计就是它能跳转,这是链接最显著的特点,当然这也是废话,要不怎么能叫链接?第二个想到的可能 ...
用原生JavaScript实现图片瀑布流的浏览效果
学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...
html5 canvas 遮罩,HTML5 canvas如何实现橡皮擦擦拭效果
简要教程这是一款HTML5 canvas橡皮擦擦拭效果.该效果通过canvas来制作遮罩层和擦拭用的橡皮擦,用户可以通过移动鼠标来移除遮罩层,效果非常炫酷. 使用方法 HTML结构该HTML5 c ...
用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
canvas 擦除动画_用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...
基于 HTML5 Canvas 实现的文字动画特效
前言文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的.文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读. ...

HTML5 canvas 瀑布流文字 (骇客帝国效果）

HTML5 canvas 瀑布流文字 (骇客帝国效果）相关推荐

最新文章

热门文章