HTML5七夕情人节表白网页制作【html5 canvas全屏的520爱心表白网页代码】HTML CSS JavaScript

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
三、精彩专栏

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>爱心</title>
	<style>
		*{margin:0; padding:0;}
		body{ background-color: #1E1E1E; 		}
	</style>
</head>
<body>
 
	<canvas id="drawHeart"></canvas>
 
	<script>
		var hearts = [];
		var canvas = document.getElementById('drawHeart');
		var wW = window.innerWidth;
		var wH = window.innerHeight;
		// 创建画布
		var ctx = canvas.getContext('2d');
		// 创建图片对象
		var heartImage = new Image();
		heartImage.src = 'img/heart.svg';
		var num = 100;
 
		init();
 
		window.addEventListener('resize', function(){
			 wW = window.innerWidth;
			 wH = window.innerHeight;
		});
		// 初始化画布大小
		function init(){
			canvas.width = wW;
			canvas.height = wH;
			for(var i = 0; i < num; i++){
				hearts.push(new Heart(i%5));
			}
			requestAnimationFrame(render);
		}
 
		function getColor(){
			var val = Math.random() * 10;
			if(val > 0 && val <= 1){
				return '#00f';
			} else if(val > 1 && val <= 2){
				return '#f00';
			} else if(val > 2 && val <= 3){
				return '#0f0';
			} else if(val > 3 && val <= 4){
				return '#368';
			} else if(val > 4 && val <= 5){
				return '#666';
			} else if(val > 5 && val <= 6){
				return '#333';
			} else if(val > 6 && val <= 7){
				return '#f50';
			} else if(val > 7 && val <= 8){
				return '#e96d5b';
			} else if(val > 8 && val <= 9){
				return '#5be9e9';
			} else {
				return '#d41d50';
			}
		}
 
		function getText(){
			var val = Math.random() * 10;
			if(val > 1 && val <= 3){
				return '爱你一辈子';
			} else if(val > 3 && val <= 5){
				return '感谢你';
			} else if(val > 5 && val <= 8){
				return '喜欢你';
			} else{
				return 'I Love You';
			}
		}
 
		function Heart(type){
			this.type = type;
			// 初始化生成范围
			this.x = Math.random() * wW;
			this.y = Math.random() * wH;
 
			this.opacity = Math.random() * .5 + .5;
 
			// 偏移量
			this.vel = {
				x: (Math.random() - .5) * 5,
				y: (Math.random() - .5) * 5
			}
 
			this.initialW = wW * .5;
			this.initialH = wH * .5;
			// 缩放比例
			this.targetScale = Math.random() * .15 + .02; // 最小0.02
			this.scale = Math.random() * this.targetScale;
 
			// 文字位置
			this.fx = Math.random() * wW;
			this.fy = Math.random() * wH;
			this.fs = Math.random() * 10;
			this.text = getText();
 
			this.fvel = {
				x: (Math.random() - .5) * 5,
				y: (Math.random() - .5) * 5,
				f: (Math.random() - .5) * 2
			}
		}
 
		Heart.prototype.draw = function(){
			ctx.save();
			ctx.globalAlpha = this.opacity;
			ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
			ctx.scale(this.scale + 1, this.scale + 1);
  			if(!this.type){
  				// 设置文字属性
				ctx.fillStyle = getColor();
	  			ctx.font = 'italic ' + this.fs + 'px sans-serif';
	  			// 填充字符串
	  			ctx.fillText(this.text, this.fx, this.fy);
  			}
			ctx.restore();
		}
		Heart.prototype.update = function(){
			this.x += this.vel.x;
			this.y += this.vel.y;
 
			if(this.x - this.width > wW || this.x + this.width < 0){
				// 重新初始化位置
				this.scale = 0;
				this.x = Math.random() * wW;
				this.y = Math.random() * wH;
			}
			if(this.y - this.height > wH || this.y + this.height < 0){
				// 重新初始化位置
				this.scale = 0;
				this.x = Math.random() * wW;
				this.y = Math.random() * wH;
			}
 
			// 放大
			this.scale += (this.targetScale - this.scale) * .1;
			this.height = this.scale * this.initialH;
			this.width = this.height * 1.4;
 
			// -----文字-----
			this.fx += this.fvel.x;
			this.fy += this.fvel.y;
			this.fs += this.fvel.f;
 
			if(this.fs > 50){
				this.fs = 2;
			}
 
			if(this.fx - this.fs > wW || this.fx + this.fs < 0){
				// 重新初始化位置
				this.fx = Math.random() * wW;
				this.fy = Math.random() * wH;
			}
			if(this.fy - this.fs > wH || this.fy + this.fs < 0){
				// 重新初始化位置
				this.fx = Math.random() * wW;
				this.fy = Math.random() * wH;
			}
		}
 
		function render(){
			ctx.clearRect(0, 0, wW, wH);
			for(var i = 0; i < hearts.length; i++){
				hearts[i].draw();
				hearts[i].update();
			}
			requestAnimationFrame(render);
		}
	</script>
</body>
</html>
 
 复制

三、精彩专栏

看到这里了就 【点赞，好评，收藏】 三连支持下吧，你的支持是我创作的动力。—— `

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥

HTML5七夕情人节表白网页制作【html5 canvas全屏的520爱心表白网页代码】HTML CSS JavaScript

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

三、精彩专栏

解决VUE3 Vite打包后动态图片资源不显示问题

Vue 3 项目中导入外部的＜link＞和＜script＞资源

Vue将中英文本base64编码及解码

Vue获取url上的参数

vue省市区三级联动选择器

eslint prettier vue3格式化

Vue Router 进阶

Vscode的vue项目中下滑红线报错问题

JavaScript与JQuery的区别（超详细）

jQuery：将字符串转换为数组

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>爱心</title>
	<style>
	*{margin:0; padding:0;}
	body{ background-color: #1E1E1E; }
	</style>
	</head>
	<body>

	<canvas id="drawHeart"></canvas>

	<script>
	var hearts = [];
	var canvas = document.getElementById('drawHeart');
	var wW = window.innerWidth;
	var wH = window.innerHeight;
	// 创建画布
	var ctx = canvas.getContext('2d');
	// 创建图片对象
	var heartImage = new Image();
	heartImage.src = 'img/heart.svg';
	var num = 100;

	init();

	window.addEventListener('resize', function(){
	wW = window.innerWidth;
	wH = window.innerHeight;
	});
	// 初始化画布大小
	function init(){
	canvas.width = wW;
	canvas.height = wH;
	for(var i = 0; i < num; i++){
	hearts.push(new Heart(i%5));
	}
	requestAnimationFrame(render);
	}

	function getColor(){
	var val = Math.random() * 10;
	if(val > 0 && val <= 1){
	return '#00f';
	} else if(val > 1 && val <= 2){
	return '#f00';
	} else if(val > 2 && val <= 3){
	return '#0f0';
	} else if(val > 3 && val <= 4){
	return '#368';
	} else if(val > 4 && val <= 5){
	return '#666';
	} else if(val > 5 && val <= 6){
	return '#333';
	} else if(val > 6 && val <= 7){
	return '#f50';
	} else if(val > 7 && val <= 8){
	return '#e96d5b';
	} else if(val > 8 && val <= 9){
	return '#5be9e9';
	} else {
	return '#d41d50';
	}
	}

	function getText(){
	var val = Math.random() * 10;
	if(val > 1 && val <= 3){
	return '爱你一辈子';
	} else if(val > 3 && val <= 5){
	return '感谢你';
	} else if(val > 5 && val <= 8){
	return '喜欢你';
	} else{
	return 'I Love You';
	}
	}

	function Heart(type){
	this.type = type;
	// 初始化生成范围
	this.x = Math.random() * wW;
	this.y = Math.random() * wH;

	this.opacity = Math.random() * .5 + .5;

	// 偏移量
	this.vel = {
	x: (Math.random() - .5) * 5,
	y: (Math.random() - .5) * 5
	}

	this.initialW = wW * .5;
	this.initialH = wH * .5;
	// 缩放比例
	this.targetScale = Math.random() * .15 + .02; // 最小0.02
	this.scale = Math.random() * this.targetScale;

	// 文字位置
	this.fx = Math.random() * wW;
	this.fy = Math.random() * wH;
	this.fs = Math.random() * 10;
	this.text = getText();

	this.fvel = {
	x: (Math.random() - .5) * 5,
	y: (Math.random() - .5) * 5,
	f: (Math.random() - .5) * 2
	}
	}

	Heart.prototype.draw = function(){
	ctx.save();
	ctx.globalAlpha = this.opacity;
	ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
	ctx.scale(this.scale + 1, this.scale + 1);
	if(!this.type){
	// 设置文字属性
	ctx.fillStyle = getColor();
	ctx.font = 'italic ' + this.fs + 'px sans-serif';
	// 填充字符串
	ctx.fillText(this.text, this.fx, this.fy);
	}
	ctx.restore();
	}
	Heart.prototype.update = function(){
	this.x += this.vel.x;
	this.y += this.vel.y;

	if(this.x - this.width > wW \|\| this.x + this.width < 0){
	// 重新初始化位置
	this.scale = 0;
	this.x = Math.random() * wW;
	this.y = Math.random() * wH;
	}
	if(this.y - this.height > wH \|\| this.y + this.height < 0){
	// 重新初始化位置
	this.scale = 0;
	this.x = Math.random() * wW;
	this.y = Math.random() * wH;
	}

	// 放大
	this.scale += (this.targetScale - this.scale) * .1;
	this.height = this.scale * this.initialH;
	this.width = this.height * 1.4;

	// -----文字-----
	this.fx += this.fvel.x;
	this.fy += this.fvel.y;
	this.fs += this.fvel.f;

	if(this.fs > 50){
	this.fs = 2;
	}

	if(this.fx - this.fs > wW \|\| this.fx + this.fs < 0){
	// 重新初始化位置
	this.fx = Math.random() * wW;
	this.fy = Math.random() * wH;
	}
	if(this.fy - this.fs > wH \|\| this.fy + this.fs < 0){
	// 重新初始化位置
	this.fx = Math.random() * wW;
	this.fy = Math.random() * wH;
	}
	}

	function render(){
	ctx.clearRect(0, 0, wW, wH);
	for(var i = 0; i < hearts.length; i++){
	hearts[i].draw();
	hearts[i].update();
	}
	requestAnimationFrame(render);
	}
	</script>
	</body>
	</html>

HTML5七夕情人节表白网页制作【html5 canvas全屏的520爱心表白网页代码】HTML CSS JavaScript

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

三、精彩专栏

微信扫一扫：分享