使用svg
* 创建一个后缀为.svg的文件
* 基本格式
* <svg xmlns="http://www.w3.org/2000/svg"></svg> xmlns:svg命名空间
1.绘制一个直线
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
<line x1="30" y1="80"
x2="200" y2="80"
stroke="#f00"
stroke-width="5"/>
</svg>
//line常用属性: x1,y1:指定线起始坐标
//x2,y2:指定线结束坐标
//stroke:线颜色 相当于canvas中的strokeStyle
//stroke-width:设置线粗细 相当于canvas中的lineWidth
2. 绘制一个矩形
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
<rect x="0" y="0" width="100%" height="100%" style='fill:red' />
</svg>
rect常用属性说明:x,y左上角坐标 width,height:矩形的宽和高
3.绘制一个圆
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
<circle cx="300" cy="150" r="100" style="fill:green" />
</svg>
circle常用属性:
cx:圆心的x值
cy:圆心的y值
r:圆半径
4. 绘制一个椭圆
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
<ellipse cx="300" cy="150" rx="100" ry="50" style="fill:yellow"/>
</svg>
ellipse常用属性: cx:椭圆心的x值 cy:椭圆心的y值
rx:椭圆心x轴半径 ry:椭圆心y轴半径
注意:圆是特殊的椭圆,只需将rx,ry改成相同数值即可
5. 绘制多边形
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
<polyline points="设置多个点的坐标集合" style=""/>
</svg>
格式2:
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
<polygon points="设置多个点的坐标集合" style=""/>
</svg>
// polyline不会自动封装结束和起始点,而polygon自动封封闭起始和结束点的连线
6. 绘制文字
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">
<ellipse cx="300" cy="150" rx="100" ry="50" style="fill:yellow" />
<text x="300" y="150" style="fill:red;font-size:30px;" text-anchor="middle">
我爱你
</text>
</svg>
7. 绘制路径
- 使用path来绘制,可以绘制你想要的任何图形
- 常用命令参数
- 直线命令
- m,M 相当于canvas中的moveTo
- l,L 相当于canvas中的lineTo
- v,V: 只绘制垂直线
- h,H:只绘制水平线
- 曲线命令
- 三次贝赛尔曲线
- c,C
- s:是c的简写,可以快速绘制曲线,通常和c配合使用
- 二次贝赛尔曲线 ----q t
- 绘制弧线:a
- z:自动从当前坐标点绘制一条连接到起始坐标的直线(自动封闭)
所有的命令字母大小写区别
大写字母代表绝对坐标,也就是说以svg画布的左上角当坐标原点(0,0)
小写字母代表相对坐标,总是以上一个点的坐标当坐标下一个点的坐标原点(0,0)
- path绘制基本图形
绘制直线和矩形