HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用

2020-04-24 19:41:26易采站长站整理
Hx 画笔从当前的点绘制水平线段到点(x,y0)Vy 画笔从当前的点绘制竖直线段到点(x0,y)Arx ry x-axis-rotation large-arc-flag sweep-flag x y画笔从当前的点绘制一段圆弧到点(x,y)Cx1 y1, x2 y2, x y画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)Sx2 y2, x y特殊版本的三次贝塞尔曲线(省略第一个控制点)Qx1 y1, x y 绘制二次贝塞尔曲线到点(x,y)Tx y特殊版本的二次贝塞尔曲线(省略控制点)Z无参数绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。

移动画笔指令M,画直线指令:L,H,V,闭合指令Z都比较简单;下面重点看看绘制曲线的几个指令。

绘制圆弧指令:A  rx ry x-axis-rotation large-arc-flag sweep-flag x y
用圆弧连接2个点比较复杂,情况也很多,所以这个命令有7个参数,分别控制曲线的的各个属性。下面解释一下数值的含义:
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线,0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。
前两个参数和后两个参数就不多说了,很简单;下面就说说中间的3个参数:
x-axis-rotation代表旋转的角度,体会下面例子中圆弧的不同:

复制代码
<svg width=”320px” height=”320px”>
<path d=”M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10″ stroke=”black” fill=”green” stroke-width=”2″ fill-opacity=”0.5″/>
</svg>

上面的HTML画出下面的图形:

 
从图中可以看到椭圆旋转参数的不同导致绘制的圆弧方向不同,当然这个参数对正圆来说没有影响。

large-arc-flag和sweep-flag控制了圆弧的大小和走向,体会下面例子中圆弧的不同:

复制代码
<svg width=”325px” height=”325px”>