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

最新推荐文章于 2022-08-16 11:52:36 发布
最新推荐文章于 2022-08-16 11:52:36 发布
阅读量2k 收藏 1
点赞数
分类专栏： HTML5 JavaScript
转自： http://www.gbtags.com/gb/rtreplayer/1380.htm （极限标签）

一、效果图

【html】
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
<canvas id="c"></canvas>
</div>

<!-- 推荐开源CDN来选取需引用的外部JS //-->
<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);

chelen_jak
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Canvas柳枝随风飘摇动画
11-09
一款用HTML5Canvas模拟的柳树随风飘摇的动画特效，柳枝和柳叶的模拟通过CSS实现。重点在于我们将鼠标滑过柳枝时，就像微风拂过一般，将柳枝和柳叶飘摇起来，这中间大家可以学习如何用HTML5技术在Canvas画板上实现动画。
html5 canvas黑客帝国文字瀑布流效果
11-07
html5 canvas黑客帝国文字瀑布流效果 html5 canvas黑客帝国文字瀑布流效果
使用canvas与js实现黑客帝国代码瀑布流
pwk795的博客
05-06 708
    这篇博文仅记录用，无任何技术知识阐述。    分析        1.技术分析：            canvas绘制文字的函数 fillText("text",x,y) 可以在某个坐标绘制出文字。        2.瀑布需求：            （1）形象（即拥有瀑布的属性，由上至下，无间断，错落有致）            （2）美观        设计        将瀑布分为...
【H5】 canvas绘出喷泉告白效果
舜岳的博客
05-29 948
【H5】 canvas绘出喷泉告白效果 效果图如下： 代码如下： 代码内有详解哦！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
html好看的文字特效
热门推荐
xcLeigh
08-16 1万+
html文字特效，html好看的文字特效，3D文字、会跳动得文字、文字倒影、文字强调动画等超多炫酷特效，及详细讲解文本属性，希望能给你作为参考，给你带来好的灵感
HTML5 canvas 瀑布流文字效果的示例代码
09-27
总的来说，这个HTML5 Canvas瀑布流文字效果的示例展示了如何结合JavaScript和Canvas API创建动态的、视觉吸引人的文字动画。通过理解这个代码，开发者可以进一步探索Canvas的潜力，制作出更多创新的网页元素。同时，...
HTML5骇客帝国文字矩阵效果.zip
07-11
真心漂亮的HTML5文字特效，模仿黑客帝国电影片头字幕效果，很多个文字排成列不断坠落，就像天上的流量一样下落，下落时候还有点拖尾的味道，主要是使用了HTML5中的Canvas技术，仅供学习参考。
html5 canvas绘制逼真3D瀑布流动画特效
09-04
在这个“html5 canvas绘制逼真3D瀑布流动画特效”的主题中，我们将深入探讨如何利用Canvas API创建出引人入胜的3D瀑布动画。 首先，Canvas API是HTML5的一个核心特性，它通过JavaScript提供了对2D和3D图形的低级...
HTML5骇客帝国文字矩阵效果特效代码
03-20
4. **文本生成与滚动**：在骇客帝国效果中，文本通常是随机选择的字符连续滚动。这需要一个算法来生成随机字符串，并计算每个字符的位置和速度，然后在每一帧更新它们的状态。 5. **性能优化**：由于Canvas的实时...
html5 canvas流动的瀑布动画特效
11-06
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
Canvas实现文字云（标签云）效果，多浏览器支持
05-10
Canvas实现文字云（标签云）效果，多浏览器支持。 支持IE9及以上浏览器。 已封装为类。 原生代码，未用到其它js框架。
html5 canvas酷炫粒子喷泉动画特效
11-06
html5 canvas酷炫粒子喷泉动画特效 html5 canvas酷炫粒子喷泉动画特效
html5骇客帝国文字矩阵效果.zip
11-18
在"html5骇客帝国文字矩阵效果.zip"这个压缩包中，包含的是一段使用HTML5、CSS和JavaScript实现的代码，其目的是复现电影《骇客帝国》中的经典文字矩阵效果。这个效果是通过快速滚动的字母和数字流来营造出一种高...
基于html5 canvas实现的动态文字特效代码
11-23
在这个“基于html5 canvas实现的动态文字特效代码”项目中，我们将探讨如何利用Canvas API来创建引人注目的文字动画效果。 Canvas API提供了一系列方法，如`fillText()`和`strokeText()`，用于在画布上绘制文本，而...
html5 canvas英文字母颗粒文字动画效果代码
11-06
html5 canvas英文字母颗粒文字动画效果代码 html5 canvas英文字母颗粒文字动画效果代码
横向文字瀑布流，不错的一个东西 纯html+css
黑猫警长博客
10-31 1158
  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; /
canvas绘制瀑布雨(一看就懂)
chen_0214的博客
08-01 435
先来说说思路吧～～ 首先，最基本的得会用canvas绘制线条， 循环， 按照拟定的稀疏去给定循环次数， 即每次绘制一次结束之后记得清楚绘制， 不然线条会连接。 达不到想要的效果 按照自己想用的颜色去设置绘制线条的颜色，渐变等（createLinearGradient（））方法， 不会的可以去百度看看 很简单的 上面完成之后， 基本这个静态的效果就已经出来了， 只差最后一步～～～～。设置定时器，且每次定时器开始的时候要记得去清除整个屏幕的绘制， 以假乱真达到想要的下雨特效 看代码， 一看就懂 <!.
canvas动画之三 -- 黑客帝国文字掉落效果
SweetoDream
12-19 7623
今天要实现的效果是黑客帝国里面的文字掉落效果，先来看一下图其实效果也是比较好实现的，只要计算出每个文字该出现的地方，然后绘制文字就可以了。下面就来说具体的实现方法吧。首先，新建页面写上canvas标签，在js中获取到并设置高宽：<canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas
原生js实现瀑布流布局
白马非马的博客
07-25 5540
html结构<section id="main"> <div class="item"> <div class="pic"> <img src="images/p7.jpg" alt="">7 </div> </div> <div class="item"> <div class="pic">
HTML5 canvas 骇客帝国文字效果
最新发布
07-21
要实现骇客帝国中的文字效果，可以借助HTML5 canvas和一些JavaScript代码来实现。下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> canvas { background-color: #000; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // 获取canvas元素 const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置canvas宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 定义文字样式 const fontSize = 16; ctx.font = `${fontSize}px Courier`; ctx.fillStyle = '#0F0'; // 定义文本内容 const text = 'Welcome to the Matrix'; // 定义文本的起始位置 let x = (canvas.width - ctx.measureText(text).width) / 2; let y = canvas.height / 2; // 定义绘制文本的间隔 const interval = 100; // 定义控制参数 let currentCharIndex = 0; let lastTime = performance.now(); function draw() { // 计算时间间隔 const currentTime = performance.now(); const deltaTime = currentTime - lastTime; // 控制文字逐个显示的速度 if (deltaTime > interval) { lastTime = currentTime; // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制文字 for (let i = 0; i < currentCharIndex; i++) { const char = text.charAt(i); ctx.fillText(char, x, y + (i * fontSize)); } // 更新当前字符索引 currentCharIndex++; // 检测是否显示完所有字符 if (currentCharIndex > text.length) { currentCharIndex = 0; } } // 递归调用draw函数 requestAnimationFrame(draw); } // 启动动画 draw(); </script> </body> </html> ``` 这段代码会在页面上创建一个全屏的canvas元素，并通过逐个显示字符的方式实现骇客帝国中的文字效果。你可以根据需要修改文本内容、样式和动画参数来实现自己想要的效果。希望对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值