一. Canvas画圆
context.arc(x，y，r，sAngle，eAngle，counterclockwise )；
X
圆心的x坐标
Y
圆心的y坐标
R
圆的半径
sAngle
起始角，以弧度为单位(弧的圆形在3点钟的位置为0度) )。
eAngle
以弧度结束角
Counterclockwise
可选项。 决定是逆时针还是顺时针。 False=顺时针，true=逆时针
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width， initi a ant }/style/headbodycanvasid=' my canvas ' width=' 1000 px ' height=' 400 px '/canvas script type=' text/javas ctx.beginPath (； CTX.arc (120、120、100、0、2 * math.pi )； //完整圆ctx.stroke (； ctx.save (； ctx.beginPath (； CTX.arc (120，120，2，0，2 * math.pi )； //第一个点ctx.strokeStyle='red '； ctx.stroke (； ctx.closePath (； ctx.fillStyle='red '； ctx.fill (； ctx.restore (； ctx.save (； ctx.beginPath (； CTX.arc (340，120，2，0，2 * math.pi )；//第二个点ctx.strokeStyle='red '； ctx.stroke (； ctx.closePath (； ctx.fillStyle='red '； ctx.fill (； ctx.restore (； ctx.beginPath (； CTX.arc (340，120，100，0，Math.PI，true )； //半圆弧，逆时针ctx.stroke ()； ctx.beginPath (； CTX.arc (560，120，100，0，Math.PI )； //半圆弧，顺时针ctx.stroke ()； ctx.save (； ctx.beginPath (； CTX.arc (560，120，2，0，2 * math.pi )；//第三个点ctx.strokeStyle='red '； ctx.stroke (； ctx.closePath (； ctx.fillStyle='red '； ctx.fill (； ctx.restore (； } drawARC (； /script/body/html
二. svg画圆
arxryx-axis-rotation large-arc-flag sweep-flag xy
指令
a (绝对) a (相对)
名称
椭圆弧
参数
(rxryx-axis-rotation large-arc-flag sweep-flag xy )
rx ry是椭圆的两轴长度。
x-axis-rotation是椭圆相对于坐标系的旋转角度，是角度数而不是弧度数。
large-arc-flag通过标记大弧(1)或小弧)来绘制。
sweep-flag以顺时针(1)或逆时针(0)方向绘制标记。
x y是圆弧终点的坐标。
描述
绘制从当前点到点(x，y )的椭圆弧。 椭圆的大小、弱石(rx，ry )和x-axis-rotation参数确定整个椭圆相对于当前坐标系的旋转角度。 椭圆的中心坐标[CX，cy]将自动计算以满足其他参数约束。 “large-arc-flag”和“sweep-flag”还用于计算和绘制圆弧。
！ doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width，initi a -完整的圆--pathd=' m 20120 a 10010001220120 m 220120 a 100100120 ' fill=' none ' stroke=' black '/pathcircleCX='120 -上半圆--pathd=' m 240120 a 10010001440120 ' fill=' none ' stroke=' black '/pathcirclecx=' 340 ' cy=' 120 ' r=' 340 ' cy -下半圆--pathd=' m 460120 a 100100000660120 ' fill=' none ' stroke=' blabllable