1.Canvas

Canvas 是 HTML5 中新增的一个元素，它提供了一种通过 JavaScript 来绘制图形的方式，使用笔刷绘制2D图案。通过 Canvas，我们可以在网页中动态地绘制出各种图形、图表、动画等内容，实现更丰富的交互效果。

工作方式

Canvas 的工作方式是，我们首先在 HTML 页面中添加一个 <canvas> 元素，并指定其宽度和高度，然后在 JavaScript 中获取该元素的上下文对象，并通过调用它的方法来绘制图形。Canvas 的上下文对象有多种，包括 2D 上下文、WebGL 上下文等，我们可以根据需求选择相应的上下文对象来进行绘制。

常用属性

属性	效果
`fillStyle`	填充颜色。默认为黑色
`strokeStyle`	描边颜色。默认为黑色
`lineWidth`	线条宽度。默认为 1 像素
`lineCap`	线条末端的样式,可选值有 butt、round 和 square。默认为 butt
`lineJoin`	线条相交处的样式,可选值有 miter、round 和 bevel。默认为 miter。
`miterLimit`	线条相交处的最大斜接长度。默认为 10 像素
`globalAlpha`	绘制的透明度。默认为 1（不透明）
`shadowColor`	阴影颜色。默认为黑色
`shadowOffsetX`、`shadowOffsetY`	阴影的偏移量和模糊程度
`shadowBlur`	模糊程度

优缺点

优点

基于矢量绘制，图形可以自由缩放而不失真
具有良好的跨浏览器兼容性
通过 JavaScript 动态生成图形，可以更加灵活地控制图形的显示和交互

缺点

无法处理复杂的交互事件、不支持跨域图像等

使用实例

这个实例中，我们使用了一个 HTML5 的 Canvas 元素，它的宽度和高度分别为 200 像素。在 JavaScript 中，我们获取了这个元素，并通过 getContext 方法获取了它的上下文对象。然后，我们使用 fillStyle 属性设置了矩形的填充颜色为红色，并使用 fillRect 方法绘制了一个起点坐标为 (50,50)，宽度为 100 像素，高度为 100 像素的矩形。

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Example</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
  // 获取画布元素
  var canvas = document.getElementById('myCanvas');
  // 获取画布上下文
  var ctx = canvas.getContext('2d');
  // 绘制矩形
  ctx.fillStyle = 'red';
  ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>

2.SVG

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种基于 XML 的矢量图形标准，它可以用来描述二维图形和图形应用程序，使用标签绘制不规则矢量图。与像素图形不同，SVG 图形是基于矢量的，它使用数学公式来描述图形形状，因此可以自由缩放而不失真。

常用属性

属性	效果
`width`, `height`	元素的宽度和高度
`viewBox`	元素的视口大小和位置
`viewBox`	元素的填充颜色
`viewBox`	元素的描边颜色和宽度
`opacity`	元素的不透明度
`transform`	元素的变换，如旋转、缩放、平移等
`d`	用于路径元素（如 `<path>`）的属性，指定路径的数据
`text-anchor` , `alignment-baseline`	用于文本元素（如 `<text>`）的属性，指定文本的水平和垂直对齐方式
`x` , `y`	用于定位元素的属性，指定元素的 x 坐标和 y 坐标

优缺点

优点

具有良好的跨浏览器兼容性、可搜索性和可访问性
支持丰富的图形效果和动画
可以通过 CSS 和 JavaScript 来进行样式和交互控制，可以与其他 Web 技术结合使用，实现更丰富的Web应用

缺点

对于复杂的图形或大量的数据，SVG 可能会影响性能

使用实例

在 HTML 页面中添加 <svg> 元素，并设置其宽度和高度

<svg width="200" height="200"></svg>

在 <svg> 元素中添加各种 SVG 元素来描述图形形状。使用 <rect> 元素和 <circle> 元素来绘制一个红色的矩形和一个黄色的圆形，同时设置了边框的颜色、宽度和样式。

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="red" stroke="black" stroke-width="2"/>
  <circle cx="100" cy="100" r="50" fill="yellow" stroke="black" stroke-width="2"/>
</svg>

使用 CSS 来设置 SVG 元素的样式。使用 CSS 来设置 SVG 元素的边框和背景颜色。

svg {
    border: 1px solid black;
    background-color: #eee;
}

使用 JavaScript 来实现交互效果和动画效果。使用 JavaScript 来监听圆形的点击事件，并在点击时将圆形的半径设置为 75，从而实现一个简单的动画效果。

const circle = document.querySelector('circle');
circle.addEventListener('click', () => {
  circle.setAttribute('r', '75');
});

3.Canvas 和 SVG 的区别

Canvas 是用笔刷来绘制 2D 图形的
SVG 则是用标签来绘制不规则矢量图

相同点

都是用来绘制 2D 图形的

不同点

SVG 画的是矢量图（不依赖分辨率），Canvas 画的是位图（依赖分辨率）
SVG 节点过多时渲染较慢， Canvas 性能好一些，但写起来更复杂
SVG 支持分层和事件，Canvas 不支持，但可以使用库来实现
SVG 每一个图形都是一个 DOM 元素，Canvas 则是单个 HTML元素，相当于 <img>
SVG 可以通过脚本和CSS进行修改，Canvas 则只能通过脚本修改
SVG 支持事件处理器，Canvas 则不支持事件处理器
SVG中，将每个绘制的形状记住为对象。如果更改了SVG对象的属性，则浏览器可以自动重新呈现形状；Canvas 由像素呈现，旦图形在画布中绘制完成，浏览器撒手不管了。如果需要更改其位置，则需要重新绘制整个场景，其中许多对象会被频繁重绘