[TOC]

0x00 前言简述

本章主要介绍HTML中图形、图像相关元素标签介绍。

元素一览

• <img> : 定义图像。
• <map> : 定义图像映射。
• <area> : 定义图像地图内部的区域。
• <svg> : 定义 SVG 图形的容器。
• <canvas> : 定义图形。

---

0x01 图形图像标签元素

img 标签

描述: <img> 元素将一张图像嵌入文档, 并且它是空标签，意思是说它只包含属性，并且没有闭合标签。
其常用的两个属性为src 属性 和 alt 属性, 前者源属性的值是图像的 URL 地址（必须指定）。

属性:

• src 属性: 指定嵌入的图片的路径
• alt 属性: 指定图像的文本描述
• height 属性: 图像的固有高度，以像素为单位。
• width 属性: 图像的固有宽度，以像素为单位。
• crossorigin 属性: 表明是否必须使用 CORS 完成相关图像的抓取, 其值为anonymous、use-credentials
• decoding 属性: 为浏览器提供图像解码方式上的提示,其值为。

  sync: 同步解码图像，实现与其他内容互斥的原子渲染。
  async: 异步解码图像，以减少其他内容的渲染延迟。
  auto: 默认值：不指定解码方式，由浏览器决定哪一种对用户来说是最合适的。

• fetchpriority 实验性属性: 提供获取图像时要使用的相对的优先级提示，其值为high/low/auto
• ismap 属性: 布尔属性表示图像是否是服务器端图像映射的一部分
• loading 属性: 指示浏览器应当如何加载该图像.

  eager: 立即加载图像，不管它是否在可视视口（visible viewport）之外（默认值）。
  lazy: 延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。

• referrerpolicy 属性: 指示在获取资源时使用的来源地址（referrer）
• sizes 属性: 表示资源大小的、以逗号隔开的一个或多个字符串
• srcset 属性: 以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像
• usemap 属性: 与元素相关联的图像映射（image map） (en-US)的部分 URL（以 # 开始的部分）。

示例:

<!-- 1.常规使用(相对路径、绝对路径) -->
<img src="./weiyigeek.jpg" width="104" height="142" />
<img src="/i/eg_cute.gif" width="50%" height="50%" />

<!-- 2.将图像嵌入到页面中，且包含用于改善无障碍的备用文本。 -->
<img src="/i/eg_tulip.jpg" alt="图像的文本描述,图像失败的时候显示" />  

<!-- 3.包含了一个 srcset 属性，它引用了 MDN 标志高清版本。 -->
<img src="favicon72.png" alt="MDN logo" srcset="favicon144.png 2x" />

<!-- 4.使用 srcset 和 sizes 属性 -->
<!-- 当匹配了媒体条件 (max-width: 600px) 时，将加载 200 像素宽的图像（最匹配的图像），否则将加载另一幅图像。 -->
<img
  src="clock-demo-200px.png"
  alt="Clock"
  srcset="clock-demo-200px.png 200w, clock-demo-400px.png 400w"
  sizes="(max-width: 600px) 200px, 50vw" />

<!-- 5.将 SVG 识别为图像 -->
<img src="mdn.svg" alt="MDN logo" role="img" />

<!-- 6.使用usermap的属性和<map>与<area>标签，创建带有可供点击区域的图像地图，其中的每个区域都是一个超级链接-usemap属性 -->
<p>请点击图像上的星球,把它们放大</p>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器）,所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
<img src="http://www.w3school.com.cn/i/eg_planets.jpg"  usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<!--下面这个是区域，后面将标签会讲到-->
<area
shape="rect"
coords="0,0,100,260"
href ="http://www.w3school.com.cn/example/html/sun.html"

target ="_blank"
alt="Sun-太阳" />

<area    
shape="circle"
coords="133,161,140,180"
href ="http://www.w3school.com.cn//example/html/venus.html"
target ="_blank"
alt="Venus-金星" />

<area
shape="circle"
coords="150,130,161,170"
href ="http://www.w3school.com.cn/example/html/mercur.html"
target ="_blank"
alt="Mercury-水星" />

<!-- 7.显示如何把一幅普通的图像设置为图像映射-ismap 属性 -->
<p>请把鼠标移动到图像上，看一下状态栏的坐标如何变化。</p>
<a href="/example/html/html_ismap.html">
    <img src="/i/eg_planets.jpg" ismap />
</a>

weiyigeek.top-执行结果示例图

扩展知识
支持的图像格式 : HTML 标准并没有给出需要支持的图像格式的列表，因此每个用户代理支持一组不同的格式, 其Web 最常用的图像格式是：

APNG（动态可移植网络图形）——无损动画序列的不错选择（GIF 性能较差）。
AVIF（AV1 图像文件格式）——静态图像或动画的不错选择，其性能较好。
GIF（图像互换格式）——简单图像和动画的不错选择。
JPEG（联合图像专家组）——有损压缩静态图像的不错选择（目前最流行的格式）。
PNG（便携式网络图形）——对于无损压缩静态图像而言是不错的选择（质量略好于 JPEG）。
SVG（可缩放矢量图形）——矢量图像格式。用于必须以不同尺寸准确描绘的图像。
WebP（网络图片格式）——图像和动画的绝佳选择。

如何正确地使用图像 : HTML 和 XHTML 最引人注目的特征之一，就是能够在文档的文本中包括图像，既可以把图像作为文档的内在对象（内联图像），也可以将其作为一个可通过超链接下载的单独文档，或者作为文档的背景。

合理地在文档内容中加入图像（静态的或者具有动画效果的图标、照片、说明、绘画，等等）时，会使文档变得更加生动活泼，更加引人入胜，而且看上去更加专业，更具信息性并易于浏览。还可以专门使一个图像成为超链接的可视引导图。
然而，如果过度使用图像，文档就会变得支离破碎，混乱不堪，而且无法阅读，用户在下载和查看该页面时，更会增加很多不必要的等待时间。

温馨提示: 对于必须以不同尺寸准确绘制的图像，则仍然推荐使用 SVG 格式。

map 标签

描述: 该标签通常与<area>属性一起使用来定义一个图像映射 (一个可点击的链接区域)，它是一个地图元素.
属性:

• name 属性: 给 map 一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格, 该属性不准与同文档中其他 map 元素的值相同，如果 id 属性也被添加，name 属性和 id 属性的值必须相同。

示例:

<map name="example-map-1">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" />
</map>

预期的实时示例输出上面的实时示例应类似于下图（使用键盘 Tab 键时）：

weiyigeek.top-map与area示例图

area 标签

描述: 该 <area> 元素 在图片上定义一个热点区域，可以关联一个超链接<area>元素仅在<map>元素内部使用。
属性:

• alt : 在未显示图像的浏览器上显示代替的文本字符串。
• coords : 给热点区域设定具体的坐标值, 针对矩形或长方形值为两个 X,Y 对(左上、右下),对于圆形值是 x,y,r (半径), 对于多边和多边形值是用 x,y 对表示每个点(x1,y1,x2,y2,x3,y3)。
• download : 此属性如果存在的话，表明作者想把超链接用于下载一个资源。
• href : area 的超链接，值为一个 URL. HTML4 里，这个值不管是不是有值都要明确指定出来。
• hreflang : 指明链接资源的语言类型.
• media : 指明链接资源的媒体类型，例：print and screen。
• rel : 对于包含 href 属性的锚，该属性指定目标对象与链接对象的关系。
• shape : 相关联的热点的形状,其值为 default、rect、circ、poly 。
• target : 本属性指明了在什么地方显示链接的资源,与a标签中其属性是一致的。
• type : 该属性指定了用于链接目标的 MIME 类型的媒体类型.

说明: coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置，相对于图像左上角的坐标是 “0,0”

<!--x,y坐标,r为半径-->
圆形：shape="circle"，coords="x,y,r"  

<!---多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域-->  每一个点都会基于(0,0)来分布
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..." 

<!--定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。--> 规定可左上角/有下角的坐标
矩形：shape="rectangle"，coords="x1,y1,x2,y2"

注释：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。

示例:

<!-- 1.简单示例 -->
<map name="primary">
  <area shape="circle" coords="200,250,25" href="another.htm" />
  <area shape="default" nohref />
</map>

<!-- 2.组合示例 -->
<img src="/i/eg_planets.jpg" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" />
  <!-- 圆形 -->
  <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />
  <!-- 矩形 -->  
  <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" />   
</map>

温馨提示: <img> 中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

svg 标签

描述: svg 元素可以用于在当前文档（比如说，一个 HTML 文档）内嵌套一个独立的 svg 片段，或者单独使用。

Q: 到底什么是SVG?

SVG是万维网联盟的标准，其指可伸缩久量图形(Scalable Vector Graphics),主要用于定义用于网络的基于矢量的图形，
它使用 XML 格式定义图形，并且图像在放大或改变尺寸的情况下其图形质量不会有损失。

示例:

<!-- 1.单 xml 文件使用，画意大利国旗 -->
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"width="150" height="100" viewBox="0 0 3 2">
  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

<!-- 2.嵌入HTML中使用，五星红旗 -->
<body>
<svg width="480" height="320" viewBox='0 0 960 640' transform="scale(1)" >
  <!-- 旗帜 -->
  <rect x='0' y='0' width='960' height='640' fill='red'/>
  <!-- 大五角星 -->
  <path d="M160,79
  L112.3894,225.5304
  L237.0356,134.9696
  L82.9644,134.9696
  L207.6106,225.5304
  Z" fill='yellow'/>

  <!-- 小五角星从上到下 -->
  <path d="M292.5602,80.4639
  L351.8765,66.8091
  L295.8626,42.9908
  L327.1787,95.1844
  L332.522,34.5518
  Z" fill='yellow'/>

  <path d="M352.3216,132.5255
  L406.9683,105.7187
  L378.5148,159.5264
  L369.9069,99.2705
  L412.2884,142.9589
  Z" fill='yellow'/>

  <path d="M353.2312,215.2089
  L403.7252,249.1976
  L382.8547,192.0206
  L366.1311,250.5462
  L414.0597,213.0267
  Z" fill='yellow'/>

  <path d="M295.0122,268.0098
  L351.9655,289.485
  L293.2665,305.5875
  L331.2902,258.0579
  L328.4656,318.8599
  Z" fill='yellow'/>
</svg>
</body>

<!-- 3.使用svg画一个五角星 -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;"/>
</svg>

weiyigeek.top-svg标签使用示例图

温馨提示: 此处只是做一个简单了解，我会在后续专门的文章中进行实践介绍。
在线画SVG工具: https://c.runoob.com/more/svgeditor/

canvas 标签

描述: 该元素可被用来通过 JavaScript（Canvas API 或 WebGL API）绘制图形及图形动画，注意该元素需要有闭合标签。

属性:

• height : 占用空间的高度，以 CSS 像素（px）表示，默认为 150。
• width : 占用空间的宽度，以 CSS 像素（px）表示，默认为 300。
• moz-opaque 非标准 已弃用: 通过设置这个属性，来控制 canvas 元素是否半透明。

画布尺寸: 画布的最大的尺寸取决于浏览器，下表的结论来自 StackOverflow

浏览器	最大高度	最大宽度	最大面积
Chrome	32,767 pixels	32,767 pixels	268,435,456 pixels (i.e., 16,384 x 16,384)
Firefox	32,767 pixels	32,767 pixels	472,907,776 pixels (i.e., 22,528 x 20,992)
Safari	32,767 pixels	32,767 pixels	268,435,456 pixels (i.e., 16,384 x 16,384)
IE	8,192 pixels	8,192 pixels	?

示例:

<!-- 示例1.使用并验证浏览器是否支持canvas -->
<canvas id="canvas" width="300" height="300">
  抱歉，您的浏览器不支持 canvas 元素
 （这些内容将会在不支持<canvas>元素的浏览器或是禁用了 JavaScript 的浏览器内渲染并展现）
</canvas>
<!-- 使用HTMLCanvasElement.getContext()获得一个绘图上下文并开始绘制 -->
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100); // (顶部距离，左部距离，宽度，高度)
</script>


<!-- 示例2.使用canvas生成时钟-->
<canvas id="canvas" width="600" height="600">
抱歉，您的浏览器不支持 canvas 元素
（这些内容将会在不支持<canvas>元素的浏览器或是禁用了 JavaScript 的浏览器内渲染并展现）
</canvas>
<script>
const c = document.querySelector("#canvas")
const ctx = c.getContext('2d')
setInterval(_ => {
  ctx.save() // 保存初始状态
  ctx.clearRect(0,0,600,600) //清空矩阵中的内容
  ctx.translate(150, 150) // 设置中心，此时150，150变成了坐标的0,0
  ctx.save() // 把状态保存起来

  ctx.beginPath() // 画大圆
  ctx.arc(0, 0, 100, 0, 2 * Math.PI) // 画圆线使用arc（中心x，中心y，半径，其实角度，结束角度）
  ctx.stroke() // 执行画线段的操作stroke
  ctx.closePath()

  ctx.beginPath() // 画小圆
  ctx.arc(0, 0, 5, 0, 2 * Math.PI)
  ctx.stroke() // 执行画线段的操作stroke
  ctx.closePath()

  // 获取当前时分秒
  let time = new Date()
  let hour = time.getHours() % 12
  let min = time.getMinutes()
  let sec = time.getSeconds()

  // 绘制时针
  ctx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (min / 60) - Math.PI / 2) // 时针角度
  ctx.beginPath()
  ctx.moveTo(-10, 0) // 线条起点
  ctx.lineTo(40, 0) // 线条终点
  ctx.lineWidth = 3
  ctx.stroke()
  ctx.closePath()
  ctx.restore() //恢复上一次sava的状态
  ctx.save() //恢复完再保存一次

  // 分针
  ctx.rotate(2 * Math.PI / 60 * min - 2 * Math.PI / 2)
  ctx.beginPath()
  ctx.moveTo(-10, 0)
  ctx.lineTo(60, 0)
  ctx.lineWidth = 2
  ctx.strokeStyle = '#999'
  ctx.stroke()
  ctx.closePath()
  ctx.restore()
  ctx.save()

  // 分针
  ctx.rotate(2 * Math.PI / 60 * sec - 2 * Math.PI / 2)
  ctx.beginPath()
  ctx.moveTo(-10, 0)
  ctx.lineTo(80, 0)
  ctx.lineWidth = 1
  ctx.strokeStyle = '#dc0000'
  ctx.stroke()
  ctx.closePath()
  ctx.restore()
  ctx.save()

  // 绘制刻度
  ctx.lineWidth = 1
  for (let i = 0; i < 60; i++) {
    ctx.rotate(2 * Math.PI / 60)
    ctx.beginPath()
    ctx.moveTo(90, 0)
    ctx.lineTo(100, 0)
    ctx.stroke()
    ctx.closePath()
  }
  ctx.restore()
  ctx.save()
  ctx.lineWidth = 2
  for (let i = 0; i < 12; i++) {
    ctx.rotate(2 * Math.PI / 12)
    ctx.beginPath()
    ctx.moveTo(86, 0)
    ctx.lineTo(100, 0)
    ctx.stroke()
    ctx.closePath()
  }
  ctx.restore()
  ctx.save()

  // 添加文字
  let num=['6','5','4','3','2','1','12','11','10','9','8','7'];
  // 设置字体即颜色
  ctx.font = "10px 微软雅黑 bolder"
  // 设置字体
  ctx.fillStyle = "#955f17"
  ctx.beginPath();
  ctx.lineWidth=2;
  for(let i=0;i<12;i++){
    ctx.strokeText(num[i],130*Math.sin(Math.PI/6*i),130*Math.cos(Math.PI/6*i));
  }
  ctx.restore()
  ctx.restore() // 恢复初始状态
}, 1000)
</script>

weiyigeek.top-使用canvas标签生成时钟演示图

补充示例: 使用 canvas 生成Hacker代码雨

<canvas id="bg-canvas"></canvas>
<script>
// 代码雨背景代码块-By WeiyiGeek
var draw = null;
var timer = null;
var bg = document.getElementById("bg-canvas");
function codeRain() {
  var s = window.screen;
  var width  = bg.width = s.width;
  var height = bg.height = s.height;
  var letters = Array(256).join(1).split('');
  clearInterval(timer);
  timer = setInterval(function(){
    bg.getContext('2d').fillStyle="rgba(0,0,0,.05)";
    bg.getContext('2d').fillRect(0,0,width,height);
    bg.getContext('2d').fillStyle="#0F0";
    letters.map(function(y_pos, index){
      //text = String.fromCharCode(34+Math.random()*33);
      text = String.fromCharCode(3e4+Math.random()*64); // 显示中文
      x_pos = index * 10;
      bg.getContext('2d').fillText(text, x_pos, y_pos);
      letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
      bg.getContext('2d').fillStyle='#'+letters[index];
    });
  },33)
}
</script>

效果演示: https://www.weiyigeek.top

温馨提示: <canvas> 元素本身只是一个位图，不提供任何绘制对象的信息。画布内容不像 HTML 那样具有语义并能暴露给无障碍工具。

温馨提示: 此处只是做一个简单了解，我会在后续专门的文章中进行实践介绍。

本章综合示例:
代码示例: https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/12.images.html