HTML蓝色爱心

写在前面

HTML入门

完整代码

代码分析

运行结果

系列推荐

写在后面

写在前面

最近好冷吖，小编给大家准备了一个超级炫酷的爱心，一起来看看吧！

HTML入门

HTML全称为HyperText Markup Language，是一种标记语言，用于创建网页结构和内容。HTML使用标签来描述网页的不同部分，如标题、段落、链接和图像等。

HTML的基本结构由<!DOCTYPE>声明、<html>标签、<head>标签和<body>标签组成。<!DOCTYPE>声明定义了HTML文档的类型，告诉浏览器如何解析和显示页面。<html>标签是HTML文档的根元素，包含了整个页面的内容。而<head>标签用于指定页面的元数据，如标题、样式表和脚本等。最后，<body>标签包含了页面的可见内容，如文字、图像和链接等。

在HTML中，标签用尖括号括起来，通常成对出现，包括一个开始标签和一个结束标签。开始标签使用尖括号包围，结束标签使用尖括号和斜杠/包围。例如，<h1>标签用于表示标题，开始标签为<h1>，结束标签为</h1>。

除了常用的标签，HTML还提供了一些特殊的标签，如<ul>和<li>标签用于创建无序列表，<ol>和<li>标签用于创建有序列表，<a>标签用于创建链接，<img>标签用于插入图像等。

除了标签，HTML还使用属性来添加额外的信息或功能。属性位于标签的开始标签中，并用键值对的形式表示。例如，<a>标签可以使用href属性来指定链接的目标地址，<img>标签可以使用src属性来指定图像的URL。

在编写HTML时，可以使用文本编辑器来编辑HTML文件，然后保存为.html文件格式。然后，可以使用浏览器来打开HTML文件，以查看该网页的效果。浏览器会解析HTML文件，并将其转化为可见的网页。

总结来说，HTML是一种标记语言，用于创建网页结构和内容。通过使用标签和属性，可以实现各种不同的效果，如标题、段落、链接和图像等。学习HTML的基础知识是了解网页开发的重要第一步。

完整代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>❤</title>
</head>
<style>
	body {
		background-color: blue;
	}

	#drawing {
		height: 100%;
		width: 100%;
	}
</style>

<body>
	<canvas id="drawing"></canvas>
</body>
<script>

	var drawing = document.getElementById("drawing"); //获取canvas元素
	var cheight = document.body.scrollHeight;
	var cwidth = document.body.scrollWidth;
	drawing.width = cwidth; //设置画布大小
	drawing.height = cheight;
	if (drawing.getContext) {  //获取绘图上下文
		var content = drawing.getContext("2d"),
			radian = 0,   //设置初始弧度
			radian_add = Math.PI / 180;  //设置弧度增量
		content.beginPath();  //开始绘图
		var drawWidth = cwidth / 2;
		var drawHeight = cheight / 2;
		content.translate(drawWidth, drawHeight);  //设置绘图原点
		var list1 = [];
		var list2 = [];
		while (radian <= (Math.PI * 2)) {  //每增加一次弧度，绘制一条线
			radian += radian_add;
			X = getX(radian);
			Y = getY(radian);
			list1.push({ x: X, y: Y });
			//求边缘点 0,0到x,y 边缘矩形4条边
			if (X != 0 && Y < 0 && (Y / X < -1 || Y / X > 1)) {//y = -drawHeight              
				A = -drawHeight * X / Y;
				B = -drawHeight;
			} else if (Y != 0 && X > 0 && (Y / X > -1 && Y / X < 1)) {// x=drawWidth
				A = drawWidth;
				B = Y / X * drawWidth;
			} else if (X != 0 && Y > 0 && (Y / X < -1 || Y / X > 1)) {//y=drawHeight
				A = drawHeight * X / Y;
				B = drawHeight;
			} else {//x=-drawWidth
				A = -drawWidth;
				B = -drawWidth * Y / X;
			}
			list2.push({ a: A, b: B });
		}
		draw();
	}
	var interVal;
	var time = 0;
	function draw() {
		var size = list1.length;
		time++;
		if (size > 0) {
			var j = Math.floor(Math.random() * size);
			content.beginPath();
			content.moveTo(list2[j].a, list2[j].b);
			content.lineTo(list1[j].x, list1[j].y);
			var grd = content.createLinearGradient(list2[j].a, list2[j].b, list1[j].x, list1[j].y)//渐变起始和结束坐标
			grd.addColorStop(0, "skyblue");//渐变颜色
			grd.addColorStop(0.3, "lightskyblue");
			grd.addColorStop(0.6, "lightskyblue")
			grd.addColorStop(1, "cyan");
			content.lineWidth = 3;
			content.strokeStyle = grd;
			content.stroke();
			list1.splice(j, 1)
			list2.splice(j, 1)
			size--;
			if (time < 3) {
				draw();
			} else {
				time = 0;
				interVal = window.requestAnimationFrame(draw);
			}
		} else {
			window.cancelAnimationFrame(interVal);
		}
	}

	function getX(t) {  //获取心型线的X坐标
		return 9 * (16 * Math.pow(Math.sin(t), 3))
	}

	function getY(t) {  //获取心型线的Y坐标
		return -9 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
	}

</script>

</html>

代码分析

这段HTML代码是一个创造心形线动画的示例，让我们分析一下代码吧：

1. <!DOCTYPE html>：这是HTML文档的声明，指定文档类型为HTML。

2. <html>：HTML文档的根元素。

3. <head>：包含了文档的元数据，如字符编码和标题。

4. <meta charset="utf-8" />：定义了文档的字符编码为UTF-8，以支持各种语言和字符。

5. <title>❤</title>：设置文档的标题为一个心形符号。

6. <style>：包含了文档的样式表。

7. body {background-color: blue;}：设置页面的背景颜色为蓝色。

8. #drawing {height: 100%; width: 100%;}：设置id为"drawing"的canvas元素的高度和宽度为整个页面的尺寸。

9. </style>：样式表的结束标签。

10. <body>：包含了页面的可见内容。

11. <canvas id="drawing"></canvas>：创建了一个canvas元素，并指定了id为"drawing"。canvas元素用于绘制图形和动画。

12. <script>：包含了JavaScript代码。

13. var drawing = document.getElementById("drawing");：获取id为"drawing"的canvas元素。

14. var cheight = document.body.scrollHeight; var cwidth = document.body.scrollWidth;：获取页面的高度和宽度。

15. drawing.width = cwidth; drawing.height = cheight;：设置canvas的宽度和高度为页面的尺寸。

16. if (drawing.getContext) { ... }：检查浏览器是否支持canvas，并执行下面的绘图代码。

17. var content = drawing.getContext("2d")：获取canvas的2D绘图上下文。

18. var radian = 0; var radian_add = Math.PI / 180;：设置初始弧度和弧度增量。

19. content.beginPath()：开始绘图。

20. content.translate(drawWidth, drawHeight)：设置绘图原点为canvas的中心点。

21. while (radian <= (Math.PI * 2)) { ... }：循环绘制心形线的每一条线段。

22. X = getX(radian); Y = getY(radian);：计算当前弧度下心形线的X坐标和Y坐标。

23. list1.push({ x: X, y: Y })：将X和Y坐标添加到list1列表中。

24. 根据X和Y的值，计算出边缘点的A和B坐标，并将其添加到list2列表中。

25. content.moveTo(list2[j].a, list2[j].b); content.lineTo(list1[j].x, list1[j].y)：绘制一条线段。

26. var grd = content.createLinearGradient(list2[j].a, list2[j].b, list1[j].x, list1[j].y)：创建线性渐变对象。

27. grd.addColorStop(0, "skyblue"); grd.addColorStop(0.3, "lightskyblue"); ...：设置渐变的颜色。

28. content.lineWidth = 3; content.strokeStyle = grd;：设置线段的宽度和颜色。

29. content.stroke()：绘制线段。

30. list1.splice(j, 1) list2.splice(j, 1)：从列表中移除已经绘制过的点。

31. if (time < 3) {draw();} else {time = 0; interVal = window.requestAnimationFrame(draw);}：控制动画的绘制速度。

32. window.cancelAnimationFrame(interVal)：停止动画的绘制。

33. function getX(t) { ... } 和 function getY(t) { ... }：根据参数t计算心形线的X坐标和Y坐标。

34. </script>：JavaScript代码的结束标签。

以上就是这段HTML代码的详细分析，它使用了canvas和JavaScript来绘制心形线的动画效果。

运行结果

系列推荐

序号	目录	直达链接
1	HTML实现3D相册	HTML实现3D相册-CSDN博客
2	HTML元素周期表	HTML元素周期表-CSDN博客
3	HTML黑客帝国字母雨	HTML黑客帝国字母雨_字母雨html-CSDN博客
4	HTML五彩缤纷的爱心	HTML五彩缤纷的爱心-CSDN博客
5	HTML飘落的花瓣	HTML飘落的花瓣-CSDN博客
6	HTML哆啦A梦	HTML哆啦A梦_html哆啦a梦代码-CSDN博客
7	HTML爱情树	HTML爱情树-CSDN博客
8	HTML新春烟花盛宴	HTML新春烟花盛宴-CSDN博客
9	HTML想见你	HTML想见你-CSDN博客
10	HTML蓝色爱心	https://want595.blog.csdn.net/article/details/139136334
11	HTML跳动的爱心	https://want595.blog.csdn.net/article/details/139137326
12	HTML橙色爱心	HTML橙色爱心-CSDN博客
13	HTML大雪纷飞	https://want595.blog.csdn.net/article/details/139136829
14
15
16
17
18
19
20
21
22
23
24
25
26
27