Canvas 与 SVG 的主要区别

精简版

1. Canvas 主要是用笔刷（JavaScript API）来绘制 2D 图形的
2. SVG 主要是用标签来（XML）绘制不规则矢量图的
3. 相同点：都是用来画 2D 图形的
4. 不同点：
   • Canvas 画的是位图，SVG 画的是矢量图
   • SVG 节点过多时渲染慢，Canvas 性能更好一点，但写起来更复杂
   • SVG 支持分层和事件，Canvas 不支持，但是可以用库实现

Canvas

基本介绍

• 使用 JavaScript API 绘图(动态生成)
• 图像单位是像素
• 没有图层的概念，绘制完毕后，浏览器不再关注它，如果位置发生变换，就需要重新绘制

如何使用

HTML

<canvas id = "canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

ctx.fillStyle = 'black'
ctx.fillRect(10, 10, 150, 100)

以上的操作：

• Document.getElementById() 获取 HTML 中 元素的引用
• HTMLCanvasElement.getContext() 获取这个元素的 context
• fillStyle 填充颜色
• fillRect() 设置位置和大小，前两位参数为坐标，后两位为宽高

SVG

基本介绍

• 使用 XML 描述的 2D 图形
• 基于 XML，意味着 SVG DOM 中每个元素都是可用的，可以为某个元素添加事件
• SVG 绘制的图像是一个对象，当对象属性发生改变，浏览器会重新绘制图形