当前位置：首页 > news >正文

HTML蓝色爱心

news 来源：原创 2024/9/21 3:28:52

写在前面

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=drawWidthA = drawWidth;B = Y / X * drawWidth;} else if (X != 0 && Y > 0 && (Y / X < -1 || Y / X > 1)) {//y=drawHeightA = drawHeight * X / Y;B = drawHeight;} else {//x=-drawWidthA = -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