Canvas中的svg数据是如何绘制图形的

符号 参数 意义
M moveTo(x,y) 移动到坐标
m moveBy(offsetX,offsetY) 移动了坐标
z / Z lineTo(beginX,beginY) 封闭绘制
L lineTo(x,y) 绘制直线
l lineBy(offsetX,offsetY) 绘制直线
H lineTo(x, y0) 水平线(只有一个参数)
h lineBy(offsetX, y0) 水平线(只有一个参数)
V lineTo(x0, y) 竖直线(只有一个参数)
v lineBy(x0, offsetY) 竖直线(只有一个参数)
C curveTo(x1,y1,x2,y2,x,y) 绘制曲线
c curveBy(offsetX1,offsetY1, offsetX2, offsetY2, offsetX, offsetY) 绘制曲线
S curveTo(x2,y2,x,y) 平滑曲线 (比直接绘制曲线少一个参数)
s curveBy(offsetX2, offsetY2, offsetX, offsetY) 平滑曲线(比直接绘制曲线少一个参数)
Q/q quadratic Bézier curveto(x1,y1,x,y) 贝塞尔曲线
T/t Shorthand/smooth quadratic Bézier curveto(x,y) 平滑贝塞尔曲线
A/a elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y) 椭圆弧

练一练
曲线
https://www.w3.org/TR/SVG/images/paths/cubic02.svg

贝塞尔
https://www.w3.org/TR/SVG/images/paths/quad01.svg

椭圆弧
https://www.w3.org/TR/SVG/images/paths/arcs01.svg

参考:
https://www.w3.org/TR/SVG/paths.html#DProperty

你可能感兴趣的:(Canvas中的svg数据是如何绘制图形的)