canvas文字雨滴效果

最新推荐文章于 2021-02-03 13:35:39 发布
最新推荐文章于 2021-02-03 13:35:39 发布
阅读量229 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuomengjia/article/details/100139955
版权 
											canvas文字雨滴效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字瀑布</title>
</head>
<body>
	<div id="test"></div>
	<br />
	<!-- <input onclick="operateAnimation(this)" id="operate" type="button" value="暂停"> -->
	<input onclick="operateAnimation(this)" type="button" value="暂停" id="operate">
	<br />
	<canvas id="canvas" style="background: #000;"></canvas>
</body>
<script type="text/javascript">
	var canvas = document.getElementById("canvas")
	var content = canvas.getContext("2d")
	var W = document.innerWidth||document.documentElement.cilenWidth||document.body.clientWidth;
	
	var H = document.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
	
	canvas.width = W
	
	canvas.height = H
	
	var fontSize = 16;
	
	var colunms = Math.floor(W / fontSize)
	
	var drops = []
	
	for (var i=0;i<colunms;i++) {
		drops.push(0)
	}
	console.log(drops)
	
	var str = "显示的运动文字"
	function draw(){
		
		content.fillStyle = "rgba(0,0,0,0.05)";
		
		content.fillRect(0,0,W,H)
		
		content.fillStyle= "#ff00ff"
		
		for (var i=0;i<colunms;i++) {
			
			var index = Math.floor(Math.random()*str.length)
			
			var x= i*fontSize
			
			var y= drops[i]*fontSize
			
			content.fillText(index,x,y)
			
				if(y >= canvas.height && Math.random() > 0.99){
				drops[i] = 0;
			 }
			drops[i]++
		}
	};
	
	draw()
	
	var intervalId = setInterval(draw,30)
	
	function operateAnimation(objBtn){
		
		var operate = document.getElementById("operate")
		
		if(objBtn.value=="开始"){
			
			objBtn.value="暂停"
			
			intervalId = setInterval(draw,30)
			
		}else{
			
			objBtn.value="开始"
			
			clearInterval(intervalId)
			
		}
		return false
	}
	
</script>
</html>

以上是实现canvas雨滴效果的代码，如有问题请联系小编！

·Mr.zuo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5 canvas实现文字雨特效源码.zip
07-04
HTML5 canvas文字雨特效源码是一款HTML5 canvas和javascript矩阵文字雨动画效果的代码，改变文字可以实现动态网页背景特效。建议使用火狐、谷歌等支持HTML5及CSS3等浏览器查看效果。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗，不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器，是一款非常优秀的特效源码。希望大家可以喜欢！
H5 canvas画布 文字雨滴效果展示
lwaner的博客
08-29 290
H5 canvas画布 文字雨滴效果展示` ** 运用到的方法 （1）Math.floor() === 向下取整 （2）Math.random()方法可返回介于 0 ~ 1 之间的一个随机数 （3）定时器 ①setInterval()设置定时器 ②clearInterval()清除定时器 （4）context.fillText( text , x , y , [maxWidth] ) 填充方式绘制...
(详)h5+js实现文字雨 Canvas的使用
砷碲 - Shendi
12-31 8227
Hello,我是Shendi,在web前端的路上一去不复返 这次给大家带来了一个文字雨效果,效果如下 实现流程 首先我们要知道什么是Canvas Canvas是h5的一个标签(画布) 在画布上任何一点都可以操作(绘制) Canvas需要配合js来使用 创建Canvas 新建一个html文件,在<body>标签中添加如下标签 代码如下 &lt...
canvas字符雨 - JavaScript实现
ZPan的博客
01-02 666
使用canvas，以JavaScript实现黑客字符雨、彩色字符雨，HTML结构、CSS代码、JS源码有详细注释。
文字特效雨
威士忌荡出の忧伤的博客
10-30 433
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;文字特效雨&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"&gt;
HTML5骇客帝国文字矩阵效果
07-25
开发者通常会创建一个数组，填充大量的字符，然后使用定时器（如`setInterval`）来更新Canvas上的内容，使字符像雨滴一样从上至下滚动，形成矩阵效果。同时，JavaScript还可以控制字符的速度、方向、颜色等属性，以...
基于HTML5 Canvas超逼真雨滴下落动画特效源码.zip
11-21
"基于HTML5 Canvas超逼真雨滴下落动画特效源码.zip"是一个利用Canvas API实现的高级视觉效果，为网页增添了生动的动态元素。在这个项目中，我们将深入探讨HTML5 Canvas的基本概念以及如何利用它来创建逼真的雨滴下落...
canvas的粒子组成文字动画互动特效.zip
10-16
例如，粒子可以模拟火焰、烟雾、雨滴等自然现象，也可以用来创建抽象艺术效果，如我们的“粒子组成文字动画”。 三、实现步骤 1. 创建`canvas`元素：在HTML中添加`<canvas>`标签，并通过JavaScript获取到对应的`...
JS实现黑客帝国文字下落效果
11-22
这个效果可以通过JavaScript（JS）来实现，搭配HTML和CSS，使得文字如同雨滴一样从屏幕顶部连续下落。以下是一个简单的实现步骤： 1. **HTML结构**： HTML是页面的基础框架，用于放置内容和定义元素。在本例中，...
canvas黑客帝国代码雨特效.zip
12-29
canvas黑客帝国代码雨特效.zip canvas黑客帝国代码雨特效.zip canvas黑客帝国代码雨特效.zip
文字雨黑客帝国特效
02-16
插件描述：javript实现文字雨特效，学习的时候写的，大侠见谅. 参考示例：http://www.jq22.com/jquery-info5879
Canvas实现黑客帝国字符雨
QingYun的博客
11-29 1035
 利用Canvas的fillText(),隔一定时间在画布上作画 &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt; &amp
canvas 字幕瀑布流
chuxunmi6637的博客
11-27 497
之前看过一次canvas的字幕瀑布流，刚好最近看到canvas这块，所以重新复习一下。 首先，新建一个canvas标签 <canvas id="canvas">浏览器不能识别canvas</canvas> 然后就是通过js来实现动画。字幕瀑布流是由多行字幕组成的，...
WEB 前端 H5canvas 文字雨滴效果展示
weixin_45492145的博客
08-29 412
H5 canvas画布 文字雨滴效果展示 懒得写了 代码是自己敲的 方法啥的稍微总结了一下；期中下面的方法介绍是引用老师的 原谅我的懒… 效果中用到的方法 （1）//获取屏幕的宽度和高度,且解决浏览器兼容问题 var W = window.innerWidth || document.documentElement.clientWidth || document.body.c...
canvas实现数字雨效果
wangzhneg123的博客
02-14 1053
效果展示： 源码展示： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;数字雨&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &amp
Html5 canvas黑客帝国文字瀑布效果
LisenYang的专栏
04-08 6152
Html5 canvas黑客帝国文字瀑布效果
canvas数字雨
焦虑的博客
02-03 319
<template> <canvas id="vue-matrix-raindrop"></canvas> </template> <script> export default { name: 'vue-matrix-raindrop', //插件的各种参数 props:{ //canvas宽度 canvasWidth:{ type:Number.
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、付费专栏及课程。

余额充值