Canvas 和 SVG 的区别
... 2025-7-10 大约 6 分钟
# 比较
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
svg 绘制出来的每一个图形的元素都是独立的 DOM 节点，能够方便的绑定事件或用来修改，复杂度高会减慢渲染速度。
canvas 输出的是一整幅画布，最适合图像密集型的游戏，其中的许多对象会被频繁重绘。
svg 输出的图形是矢量图形，后期可以修改参数来自由放大缩小，不会失真和锯齿。
而 canvas 输出标量画布，就像一张图片一样，放大会失真或者锯齿，能够以 .png 或 .jpg 格式保存结果图像。
# Canvas 画布 位图
<canvas> 标签定义图形，比如图表和其他图像，必须使用脚本来绘制图形
注意：不要在 style 中给 canvas 设置宽高，会有位移差
# canvas 的使用
// 先获取 canvas
var canvas = document.getElementById('canvas')
//获取之后，需要给 canvas 设置一个绘图环境
var canvasContext = canvas.getContext('2d')
1
2
3
4
2
3
4
# 绘制方块
fillrect(x,y,w,h) 绘制一个填充的方格，默认颜色是黑色。
前两个参数是坐标（x 轴和 y 轴），后两个参数是宽高。
strokeRect(x,y,w,h) 绘制带边框的方块。
填充(fillrect)和画线(strokeRect)的区别
先画线后填充。那么填充覆盖画线，线框的宽度就会缩小一倍
先填充后画线。那么画线覆盖填充，方块的宽度就会缩小一倍
# 设置绘图
fillStyle：填充颜色（绘制 canvas 是有顺序的）
lineWidth：线宽度，是一个数值
strokeStyle：边线颜色
# 边界的绘制
beginPath：开始绘制路径
closePath：结束绘制路径
moveTo：移动到绘制的新目标点
lineTo：新的目标点
每个线条只能有一个 moveTo()可以有多个 lineTo()
# 绘制路径
stroke：画线，默认黑色
fill：填充 默认黑色
rect：矩形区域
clearRect：删除一个画布的矩形区域
save：保存路径
restore：回复路径
# 清除画布
clearRect(x,y,w,h) 清除画布
前两个参数是坐标（x 轴和 y 轴），后两个参数是宽高
# 绘制圆形
arc(x,y,半径，起始弧度，结束弧度，旋转方向)
x，y 是圆心的坐标
turn 是逆时针，是从钟表 3 点的那个点开始旋转的
逆时针为-，顺时针为+
# 插入字体
fillText("内容",x,y) 在 canvas 上绘制实心的文本，xy 是坐标
strokeText("内容",x,y)在 canvas 上绘制空心的文本
textAlign="center" 居中 也就是将 xy 坐标与字体的中心居中
# 画布的平移和旋转
translate(x,y) 平移
- 画布的大小位置不变，是画布的起始位置变了
- 也就是说，是将画布的坐标平移了，原来的起始点(0,0)点，变成了你平移的位置加上
- - 起始点就是平移的位置
- 但是作图的地方还是原来的大小
rotate() 旋转
- 属性是角度，
- 旋转都是以画布的起始点(0,0)旋转
scale(0.5,0.5) 缩放
- 画布的缩放，其实就是讲画布向后移动，跟人的视距就变远了，近大远小
# SVG 矢量图
svg 绘制矢量图，canvas 绘制位图的
svg 使用 xml 格式绘制图形的
svg 要有一个根节点，叫 svg 标签，就相等于 html
里面的 xmlns 是命名空间，version 是版本
如果不设置大小，默认占用大小为 300x150
# rec 定义矩形
属性有：width，height，x,y,rx,ry,fill,stroke-width,stroke style
- stroke-width:线条宽度
- stroke：线条颜色，
- x 属性定义矩形的左侧位置，
- y 属性定义矩形的顶端位置
style="fill-opacity:0.2；stroke-opacity:0.5;opacity:0.5"
1
fill-opacity 只改变填充色的透明度 ，opacity 改变 fill 和 stroke 的透明度都改变
# circle 定义圆
- cx：圆的 x 轴坐标
- cy：圆的 y 轴坐标
- r：圆的半径
# ellipse 定义椭圆
- CX 属性定义的椭圆中心的 x 坐标
- CY 属性定义的椭圆中心的 y 坐标
- RX 属性定义的水平半径
- RY 属性定义的垂直半径
# line 定义直线
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束
必须结合 stroke 绘制
# polyline 定义折线
属性是 points，折线点的坐标
<polyline points="10,20 30,20 50,50" />
1
# path 定义路径
d="定义路径指令"
M = moveto 起点坐标，开始点
L = lineto 相邻坐标，下一个点
H = horizontal lineto H 代表水平画线，默认 Y 轴上的值一样
V = vertical lineto V 代表水平画线，默认 X 轴上的值一样
A = elliptical Arc 用于画曲线的
注： 以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位(相对于上一个点)。
# transform 转换
平移，旋转都是以起点((0,0)svg 的左上角)点为参考点，而 css 中以元素的中心点为参考点
# g 组合
g 用于将 相关元素进行组合
g 身上的属性，子元素都会继承，但是 g 上的属性都必须是显现属性，不是 svg 元素私有的，
比如 g 上的圆心坐标就不行
# text 文本
x 坐标，y 坐标，
xy 的值在字体的左下角
文字居中处理：text-anchor:middle;
# image 图片
x，y 是坐标，xlink：href="图片所在的路径"
# use 克隆
x，y 是相对于原始的元素的坐标位置，不是相对 svg 的(0,0)点的坐标
x="克隆元素的左上角的 x 轴"
y="克隆元素的左上角的 y 轴"
width="克隆元素的宽度"
height="克隆元素的高度"
xlink:href="URI 引用克隆元素"
# animate 动画
这个标签是你放在哪个标签里就是哪个动
注意
- 写在需要动画元素的中间
- attributeName="目标属性名称"
- from="起始值"
- to="结束值"
- dur="持续时间"
- repeatCount="动画时间将发生"，indefinite：无限次