如何在 HTML5 中指定区域的形状？

在本文中，我们将学习 HTML 区域标签的 shape 属性以及如何在 HTML5 中使用它来指定区域的形状。

我们使用area 元素的 shape属性来指定形状，并且可以与coords属性配对来指定区域的形状、大小和位置。

句法：

形状属性值及其功能和坐标属性：

• default：用于在 HTML 中指定一个区域的整个区域。
  坐标：它没有坐标，因为它跨越了整个区域。
• rect：用于定义矩形区域。
  坐标：
  • x ₁ , y ₁为左上角。
  • x ₂ , y ₂为右下角。
• circle：用于定义圆形区域。
  坐标：
  • x, y 为圆心。
  • rad 为圆的半径。
• poly：用于定义多边形区域。
  坐标：
  • x ₁ , y ₁ , x ₂ , y ₂ … x _n , y _n表示多边形的边。

注意：如果第一个和最后一个坐标对不同，最后一个坐标对将用于闭合多边形。

以上内容以表格形式总结如下：

Functionality	Attribute Value	Coords
To specify the entire region.	default	(defines the entire region)
To define a rectangular region.	rect	x1, y1, x2,  y2 – first 2 for top-left The next two for the bottom-right corner of rectangle
To define a circular region.	circle	x, y, rad – first two coordinates of the center of circle and the last the radius.
To define a polygonal region.	poly	x1, y1, x2, y2, …, xn, yn – coordinates of the edges of the polygon. In case the first and last coordinate pairs are different, the last coordinate pair will be used to close the polygon.

下面是几个例子来说明这个属性

示例 1：

输出：这里，图片的矩形部分链接到GeeksForGeeks的官方页面，多边形部分被geeks for geeks映射到DSA课程。单击任一将引导用户到与形状相关联的特定链接。我们根据我们选择的图像设置特定形状的坐标。

这是一个简短的 gif，用于演示上述示例的功能。

示例 2：

输出：这里，我们有一个圆和一个正方形（即使为此，我们也使用 rect 作为属性值）。