html实现雨滴

最新推荐文章于 2024-02-25 19:41:44 发布
最新推荐文章于 2024-02-25 19:41:44 发布
阅读量577 收藏 7
点赞数 3
分类专栏： 前端（Html+CSS+JavaScript）
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45828598/article/details/109403317
版权

HTML5 Canvas JavaScript 动态效果 动画
关键词由CSDN通过智能技术生成

实现代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  body {
	overflow: hidden;
	background: black;
}
  </style>
 </HEAD>

 <BODY>  
<canvas id="canvas-club"></canvas>
 <script>
  var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var clearColor = 'rgba(0, 0, 0, .1)';
var max = 30;
var drops = [];

function random(min, max) {
    return Math.random() * (max - min) + min;
}

function O() {}

O.prototype = {
	init: function() {
		this.x = random(0, w);
		this.y = 0;
		this.color = 'hsl(180, 100%, 50%)';
		this.w = 2;
		this.h = 1;
		this.vy = random(4, 5);
		this.vw = 3;
		this.vh = 1;
		this.size = 2;
		this.hit = random(h * .8, h * .9);
		this.a = 1;
		this.va = .96;
	},
	draw: function() {
		if (this.y > this.hit) {
			ctx.beginPath();
			ctx.moveTo(this.x, this.y - this.h / 2);

			ctx.bezierCurveTo(
				this.x + this.w / 2, this.y - this.h / 2,
				this.x + this.w / 2, this.y + this.h / 2,
				this.x, this.y + this.h / 2);

			ctx.bezierCurveTo(
				this.x - this.w / 2, this.y + this.h / 2,
				this.x - this.w / 2, this.y - this.h / 2,
				this.x, this.y - this.h / 2);

			ctx.strokeStyle = 'hsla(180, 100%, 50%, '+this.a+')';
			ctx.stroke();
			ctx.closePath();
			
		} else {
			ctx.fillStyle = this.color;
			ctx.fillRect(this.x, this.y, this.size, this.size * 5);
		}
		this.update();
	},
	update: function() {
		if(this.y < this.hit){
			this.y += this.vy;
		} else {
			if(this.a > .03){
				this.w += this.vw;
				this.h += this.vh;
				if(this.w > 100){
					this.a *= this.va;
					this.vw *= .98;
					this.vh *= .98;
				}
			} else {
				this.init();
			}
		}
		
	}
}

function resize(){
	w = c.width = window.innerWidth;
	h = c.height = window.innerHeight;
}

function setup(){
	for(var i = 0; i < max; i++){
		(function(j){
			setTimeout(function(){
				var o = new O();
				o.init();
				drops.push(o);
			}, j * 200)
		}(i));
	}
}


function anim() {
	ctx.fillStyle = clearColor;
	ctx.fillRect(0,0,w,h);
	for(var i in drops){
		drops[i].draw();
	}
	requestAnimationFrame(anim);
}


window.addEventListener("resize", resize);

setup();
anim();
  </script>
 </BODY>
</HTML>

实现结果：

在这里插入图片描述

L在前方
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Web前端特效源代码】“代码雨”纯HTML源码实现及效果|“代码雨”特效教程：从零开始实现炫酷的HTML、CSS和JavaScript动画|一步步教你实现代码雨|从零到一|新手必看|新手友好简单易懂
南北极之间
06-11 197
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。元素是 HTML5 引入的一个非常强大的绘图工具，但对于新手来说，它的使用可能会有些复杂。要使代码雨动起来，必须理解如何使用 JavaScript 创建动画。尽管代码雨效果看起来简单，但如果没有优化，可能会影响页面性能。为了实现代码雨效果，需要管理每个字符的位置和状态。要确保代码雨在窗口大小变化时仍能覆盖整个屏幕，必须处理。
html5实现的雨滴背景
12-31
主要是用html5的幕布才画出雨滴的形状，文件十分简单，即插即用
HTML5下雨加闪电动画场景特效特效代码
03-20
HTML5下雨加闪电动画场景特效是一款基于HTML5 Canvas绘制的电闪雷鸣暴风雨动画特效。
HTML炫酷文字流
笨笨男
12-05 6036
看到了黑客帝国里源代码，也用HTML写了一个=-=css: *{padding:0;margin:0} html{overflow:hidden}Html部分：<canvas id="canvas" style="background:#000"> JS部分：<script type="text/javascript"> window.onload = function(
多种代码生成炫酷代码雨（推荐）
王大师企业官方博客
09-08 2万+
三种代码生成代码雨 本人主页 文章目录三种代码生成代码雨一、html代码雨效果图：代码块二、vb代码雨效果图：代码块三、bat代码雨效果图：代码块 一、html代码雨 效果图： 代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Code</title> <style> body{
HTML CSS下雨效果
weixin_72647214的博客
03-26 655
【代码】HTML CSS下雨效果。
用HTML制作代码雨源码分享
薛定谔的猫
01-15 2406
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>代码雨</title> <!-- CSS样式 --> <style type="text/css"> * {margin: 0; padding: 0;} //无边距 .
HTML5 Canvas雨滴掉落特效
07-24
接下来，我们要探讨雨滴动画的实现原理。动画效果通常是通过连续绘制帧来实现的，每帧之间略有差异，人眼会将这些连续的帧融合在一起，形成动态效果。在Canvas中，我们可以使用`requestAnimationFrame()`函数来定时...
HTML5实现晶莹剔透的雨滴特效
09-28
JavaScript脚本引用了一个名为`rainyday.js`的外部文件，这是实现雨滴特效的核心代码。 接着，`<body>`标签内的`onload`事件在页面加载完成后调用`demo()`函数。这个函数初始化了雨滴特效。`RainyDay`是一个对象，...
实现个人主页的动态雨滴玻璃效果的HTML源码
12-22
"实现个人主页的动态雨滴玻璃效果的HTML源码"是一个这样的项目，它旨在通过CSS和HTML5的canvas元素，创建出逼真的雨滴在玻璃上滑落的动态背景效果，同时允许用户自定义背景图片，使网页更具个性化。 首先，我们来看...
html代码雨
weixin_65789976的博客
07-22 249
代码雨
html如何让雨滴消失,使用纯CSS3实现雨滴掉落水面的动画特效
weixin_30282917的博客
06-04 300
CSS语言：CSSSCSS确定body {background: #1a1a1a;font-family: sans-serif;}h1,h2 {position: absolute;left: 50%;transform: translateX(-50%);color: white;text-transform: uppercase;letter-spacing: 2px;}h1 {top: 2...
html下雨代码,(自己看)HTML5 Canvas下雨动画DEMO演示(示例代码)
weixin_42301008的博客
06-07 1822
1.开篇1.1本文目标本次的实例是HTML5 Canvas下雨动画DEMO演示，用到的知识主要是canvas和一个js的库dat.gui，感觉这个库老猛了，有空看一下。2.正文2.1代码首先是canvas绘画部分代码下雨的绘制：1 ctx.beginPath();2 var rain_height = Rain.height *dpr;3 for (var i = rain.length - 1;...
HTML代码雨特效
m0_70322631的博客
06-22 2862
html代码雨特效，附代码注释
【Web】“代码雨”纯HTML源码实现及效果
热门推荐
沙师弟专栏
05-08 20万+
【代码】【Web】“代码雨”纯HTML源码实现及效果。
用最简单的方法生成代码雨，效果相当的哇塞。
weixin_45345143的博客
09-03 2万+
生成黑客帝国中的代码雨，效果相当的哇塞，过程相当的简单，不需要电脑额外的安装工具。
网页实现黑客帝国代码雨
游客
04-30 5385
网页实现黑客帝国代码雨 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>黑客帝国代码雨 </title> <style type="text/css"> /*basic reset*/ *{margin:0;padding:0;} bod...
HTML：实现代码雨（附完整源码）
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-25 228
HTML：实现代码雨（附完整源码）
，实现按下空格键后，画布上的雨滴垂直下落的效果。
07-07
好的，我可以帮你实现这个效果。首先，你需要一个画布来显示雨滴的下落效果。你可以使用HTML5的Canvas元素来创建画布。接下来，你可以使用JavaScript来处理按下空格键后雨滴的垂直下落。 以下是一个简单的实现示例： HTML代码： ```html <!DOCTYPE html> <html> <head> <title>Raindrops</title> <style> #canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <script src="script.js"></script> </body> </html> ``` JavaScript代码（script.js）： ```javascript window.onload = function() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var raindrops = []; function Raindrop(x, y, speed) { this.x = x; this.y = y; this.speed = speed; this.update = function() { this.y += this.speed; if (this.y > canvas.height) { this.y = -10; // 重置雨滴位置 } }; this.draw = function() { ctx.beginPath(); ctx.moveTo(this.x, this.y); ctx.lineTo(this.x, this.y + 10); ctx.strokeStyle = "blue"; ctx.stroke(); }; } function createRaindrop() { var x = Math.random() * canvas.width; var y = Math.random() * -200; // 雨滴的初始位置在画布上方 var speed = Math.random() * 5 + 2; // 雨滴的下落速度 var raindrop = new Raindrop(x, y, speed); raindrops.push(raindrop); } function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < raindrops.length; i++) { var raindrop = raindrops[i]; raindrop.update(); raindrop.draw(); } requestAnimationFrame(update); } document.addEventListener("keypress", function(event) { if (event.code === "Space") { createRaindrop(); } }); update(); }; ``` 这段代码创建了一个400x400像素的画布，按下空格键会在画布上方创建一个垂直下落的蓝色雨滴。每个雨滴都会以不同的速度下落，当雨滴达到画布底部时，它会重新回到画布顶部。 你可以在浏览器中运行这段代码，按下空格键体验雨滴垂直下落的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值