HTML

HTML 图形

HTML 有多种方式来绘制图形，包括使用 SVG、Canvas 和 CSS，另外有些 JavaScript 库也可以用来绘制图表，如 D3.js、Chart.js 等。

SVG

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 格式。它支持动态交互和动画，适用于在 Web 上绘制图形。

SVG 图形是基于 XML 的，可以通过文本编辑器直接编辑，也可以通过 JavaScript 动态生成。

SVG 在 HTML 中的使用

SVG 可以通过 <svg> 标签嵌入到 HTML 中，如下所示:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

• SVG 总是以 <svg> 标签开始，然后在其中添加各种图形元素，如 <circle>、<rect>、<line>、<path> 等。

• width 和 height 属性定义了 SVG 图形的宽度和高度。

• 因为 SVG 是 XML 格式，所以需要指定命名空间 xmlns="http://www.w3.org/2000/svg"。

因为 SVG 是 XML 格式，所以请记住:

• 所有元素必须被闭合

• 所有的标签和属性都是大小写敏感的

• 所有的属性值都需要用引号引起来，即使是数字

SVG 属性

在 SVG 中，有一些常用的属性，如:

• width 和 height: 定义 SVG 图形的宽度和高度。

• viewBox: 定义用户坐标系的位置和大小，格式为 min-x min-y width height。

  min-x 和 min-y 是用户坐标系的左上角坐标，width 和 height 是用户坐标系的宽度和高度。

  注意: 绘图区域总是以块级元素的宽度为标准，这意味着 viewBox 内的内容会被缩放以适应块级元素的宽度，但可能会超出块级元素的高度。

  如下图所示:

  

Canvas

Canvas 是 HTML5 新增的元素，用于绘制图形。Canvas 只是一个画布，需要使用 JavaScript 来绘制图形。

在 HTML 中，可以通过 <canvas> 标签来创建一个画布，如下所示:

<canvas
  id="myCanvas"
  width="200"
  height="100"
  style="border:1px solid #000000;"
></canvas>

有了画布之后，就可以使用 JavaScript 来绘制图形了，如下所示:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

Canvas 绘制图片

drawImage() 方法用于在画布上绘制图片，主要有以下不同的语法:

• drawImage(image, dx, dy): 在指定位置绘制图片，image 可以是一个 Image 对象、Canvas 对象或 Video 对象。

• drawImage(image, dx, dy, dwidth, dheight): 在指定位置绘制图片，并指定宽度和高度。

• drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): 从源图像的指定区域绘制图像，并在画布上的指定区域内放置图像。

  s 开头的参数是源图像的坐标和尺寸，d 开头的参数是目标图像的坐标和尺寸。