HTML5的大纲以及canvas_canvas 大纲-优快云博客

本文链接：https://blog.youkuaiyun.com/NUT_fireless/article/details/106480448

本文详细介绍了HTML5的大纲结构，包括显式和隐式编排，并深入探讨了canvas标签的使用，展示了如何利用JavaScript进行图形绘制，如线条和圆形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5的大纲

HTML5的大纲分为显式编排和隐式编排
显式编排是指明确使用<section>来进行分块，从而创建网页，在每个区块内使用<h>标题。
隐式编排是指不使用<section>来进行区域划分，而是使用<h>或 <hgroup>元素排版的方式。这种排版方式的分级规则是：在h1到h6中h1的级别最高，h6的级别最低，在排版时，如果出现新的标题比上一级高或相同，则生成另一个区块。如果出现新的标题比上一级低，则生成下级区块。
例如：

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>h1</h1>
			<h2>h2</h2>
				<h3>h3</h3>
			<h2>h2</h2>
		<h1>h1</h1>
	</body>
</html>

在这里插入图片描述
HTML5大纲分析工具：链接.

canvas标签

<canvas>标签是HTML5中新增的标签，是专门用于绘制图形的标签。

`<canvas>`标签的基本用法

创建：

<canvas id="Canvas" width="200" height="100"></canvas>

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("Canvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

例子：线条

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

</body>
</html>

在这里插入图片描述
例子：圆形

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

</body>
</html>

在这里插入图片描述