HTML蓝色爱心

news2024/11/17 0:40:00

图片

目录

写在前面

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来绘制心形线的动画效果。

运行结果

图片

系列推荐

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

写在后面

我是一只有趣的兔子，感谢你的喜欢！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1697840.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux（六）

Linux（六）

Linux&#xff08;六&#xff09; 自定义头文件自定义头文件中写什么如何引入头文件条件编译条件编译作用 gcc工作原理Make 工作管理器什么是Make什么是Makefile/makefileMakefile假目标Makefile中的变量自定义变量预定义变量自动变量 Makefile中变量展开方式递归展开方式简单展…
阅读更多...
【Python】 如何使用.whl文件安装Python包？

【Python】 如何使用.whl文件安装Python包？

基本原理 在Python的世界中&#xff0c;.whl文件是一种分发格式&#xff0c;它代表“Wheel”。Wheel是一种Python包格式&#xff0c;旨在提供一种快速、可靠且兼容的方式&#xff0c;用于安装Python库。与源代码包相比&#xff0c;Wheel文件是预编译的&#xff0c;这意味着它们…
阅读更多...
【2024.5.26 软件设计师】记录第一次参加软考(附资料)

【2024.5.26 软件设计师】记录第一次参加软考(附资料)

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux &#x1f618;欢迎 ❤️关注 &#x1f44d;点赞 &#x1f64c;收藏 ✍️留言 文章目录 前言考试分析选择题案例分析题话外 软考总结资料 前言 这是我第一次参加软考&#xff0c;其实我并…
阅读更多...
分解质因数（唯一分解定理）

分解质因数（唯一分解定理）

阅读更多...
家乡特色|基于SprinBoot+vue的家乡特色推荐系统(源码+数据库+文档)

家乡特色|基于SprinBoot+vue的家乡特色推荐系统(源码+数据库+文档)

家乡特色推荐系统 目录 基于SprinBootvue的家乡特色推荐系统 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2管理员功能模块 3用户功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&…
阅读更多...
京东Java社招面试题真题，最新面试题

京东Java社招面试题真题，最新面试题

Java中接口与抽象类的区别是什么&#xff1f; 1、定义方式&#xff1a; 接口是完全抽象的&#xff0c;只能定义抽象方法和常量&#xff0c;不能有实现&#xff1b;而抽象类可以有抽象方法和具体实现的方法&#xff0c;也可以定义成员变量。 2、实现与继承&#xff1a; 一个类…
阅读更多...
SELINUX=enforcing时无法启动httpd服务的解决方案（semanage命令以及setroubleshoot-server插件的妙用）

SELINUX=enforcing时无法启动httpd服务的解决方案（semanage命令以及setroubleshoot-server插件的妙用）

一、问题描述&#xff1a; 当/etc/selinux/conf被要求必须是SELINUXenforcing&#xff0c;不被允许使用setenforce 0宽松模式 我们启动httpd就会报错&#xff1a; Job for httpd.service failed because the control process exited with error code. See "systemctl s…
阅读更多...
STM32-GPIO八种输入输出模式

STM32-GPIO八种输入输出模式

图片取自 江协科技 STM32入门教程-2023版 细致讲解 中文字幕 p5 【STM32入门教程-2023版 细致讲解 中文字幕】 https://www.bilibili.com/video/BV1th411z7sn/?p5&share_sourcecopy_web&vd_source327265f5c70f26411a53a9226af0b35c 目录 ​编辑 一.STM32的四种输…
阅读更多...
excel表格写存神器--xlwt

excel表格写存神器--xlwt

原文链接&#xff1a;http://www.juzicode.com/python-tutorial-xlwt-excel 在 Python进阶教程m2d–xlrd读excel 中我们介绍了Excel表格的读取模块xlrd&#xff0c;今天这篇文章带大家了解Excel表格写存模块xlwt。他俩名字相近都以Excel的简写xl开头&#xff0c;rd是read的简写…
阅读更多...
Elasticsearch的Index sorting 索引预排序会导致索引数据的移动吗？

Elasticsearch的Index sorting 索引预排序会导致索引数据的移动吗？

索引预排序可以确保索引数据按照指定字段的指定顺序进行存储&#xff0c;这样在查询的时候&#xff0c;如果固定使用这个字段进行排序就可以加快查询效率。 我们知道数据写入的过程中&#xff0c;如果需要确保数据有序&#xff0c;可能需要在原数据的基础上插入新的数据&#…
阅读更多...
slint esp32 tokio

slint esp32 tokio

源码&#xff1a;https://github.com/xiaguangbo/slint_esp32_tokio cpu 是 esp32c2&#xff0c;屏幕是 ili9341&#xff0c;触摸是 xpt2046&#xff0c;使用 spi 半双工 不使用DMA&#xff08;esp-rs还没支持&#xff09;&#xff0c;SPI 40M&#xff0c;240*320全屏刷新为1.5…
阅读更多...
HTTP交互导致ECONNABORTED的原因之一

HTTP交互导致ECONNABORTED的原因之一

背景&#xff1a; 本次记录的&#xff0c;是一次使用HTTP交互过程中遇到的问题&#xff0c;问题不大&#xff0c;就是给题目上这个报错补充一种可能的解决方案。 程序大致流程&#xff1a; 1. 设备向服务器A请求信息 2. 拿到回复记录下回复内容中的数据包下载地址等信息 3…
阅读更多...
sql聚合函数使用-笔记

sql聚合函数使用-笔记

sql聚合函数使用-笔记 SELECT SUM ( case when procurement_type 公益推送 then 1 else 0 end ) gywxTotal,SUM ( CASE WHEN (status 1 and procurement_type 公益推送) THEN 1 ELSE 0 END ) gywxYsc,SUM ( CASE WHEN (status ! 1 and procurement_type 公益推送) THEN 1 …
阅读更多...
k8s部署presto

k8s部署presto

&#xff08;作者&#xff1a;陈玓玏&#xff09; 一、前提条件 已部署k8s&#xff1b;已部署hadoop和hive&#xff0c;可参考以下链接&#xff1a; https://blog.csdn.net/weixin_39750084/article/details/136750613?spm1001.2014.3001.5502 https://blog.csdn.net/wei…
阅读更多...
Visual Studio 的调试（一）

Visual Studio 的调试（一）

最近事儿很多昂&#xff0c;更新速度相较以往慢了许多&#xff0c;备考六月份的四级&#xff0c;还有学校的期末等等&#xff0c;事儿真的太多啦&#xff0c;所以后面的更新速度也会放慢一点&#xff0c;实在是抽不开身啊诸位&#xff0c;相当抱歉&#xff0c;还望诸君见谅 言…
阅读更多...
Dockerfile文件详细介绍

Dockerfile文件详细介绍

前言 Dockerfile是一个文本文件&#xff0c;包含了用于构建Docker镜像的所有命令和说明。它定义了容器的运行环境、依赖以及启动方式&#xff0c;是创建Docker镜像的核心部分。 由于制作镜像的过程中&#xff0c;需要逐层处理和打包&#xff0c;比较复杂&#xff0c;所以Docke…
阅读更多...
Midjourney Describe API 使用文档

Midjourney Describe API 使用文档

Midjourney Describe API 使用文档 Midjourney Describe API 的主要功能是通过上传图片&#xff0c;获取对图片的描述。使用该 API&#xff0c;只需要传递图片文件&#xff0c;API 会返回图片的详细描述。无需繁琐的参数设置&#xff0c;即可获得高质量的图片描述。 支持多种图…
阅读更多...
腾讯Java社招面试题真题，最新面试题

腾讯Java社招面试题真题，最新面试题

Java中synchronized和ReentrantLock有什么区别&#xff1f; 1、锁的实现方式不同&#xff1a; synchronized是JVM层面的锁&#xff0c;主要依赖于监视器对象&#xff08;monitor&#xff09;实现。ReentrantLock是JDK层面的锁&#xff0c;通过Java代码实现&#xff0c;提供了更…
阅读更多...
陪跑真正值钱的不是教程，是你遇到那个挡住你的问题时，身边有个靠谱的人

陪跑真正值钱的不是教程，是你遇到那个挡住你的问题时，身边有个靠谱的人

今天分享两个概念&#xff0c;一个是意识决定一切&#xff0c;一个是大道至简&#xff0c;做项目就是按部就班的遵循事情发展规律去做。 先说第一个概念&#xff0c;意识决定一切。我们说的凡事预则立不预则废&#xff0c;就是计划了去做就会有结果。 给你们一个表&#xff0c;…
阅读更多...
力扣：1738. 找出第 K 大的异或坐标值

力扣：1738. 找出第 K 大的异或坐标值

1738. 找出第 K 大的异或坐标值 给你一个二维矩阵 matrix 和一个整数 k &#xff0c;矩阵大小为 m x n 由非负整数组成。 矩阵中坐标 (a, b) 的 值 可由对所有满足 0 < i < a < m 且 0 < j < b < n 的元素 matrix[i][j]&#xff08;下标从 0 开始计数&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023