了解画半圆的各个指令

一开始想的很美好，在教程网站先找个半圆示例改下就好了，但，，，各大教程网站都没有半圆的示例，呆滞在工位，，百度找svg画半圆，180度半圆？只有代码没有讲解？代码加两三个重要点讲解？小白瑟瑟发抖，哭晕在工位。学习使我快乐，从头开始学，找各博主文章学习研究总结。

// 图形示例
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>SVG Draw Arc</title><style media="screen">.svgs{display: flex; flex-flow:row wrap; justify-content: space-around; width: 620px; margin: 0 auto;}.svgs svg{width:300px; height:200px; background: #F2F2F2; margin-bottom: 10px;}</style>
</head>
<body><div class="svgs"><svg>//背景布<path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />//半圆对象<path  d="M 200 100 A 50 50  0 0 1 186.5 134 L150 100Z" stroke="#000" fill="green" fill-opacity="1" /></svg>
</div>
</body>
</html>

L指令

L指令为中心点，即为图中1点
L指令由L150 100改为L100 100后：

<path  d="M 200 100 A 50 50  0 0 1 186.5 134 L100 100Z" stroke="#000" fill="green" fill-opacity="1" />

M指令

M指令为上边连线点，即为图中2点
M指令有两个参数：上边连线点X坐标上边连线点Y坐标
M指令由M 200 100改为M 250 100后：

A指令

A指令有七个参数：

rx（画出半圆中唯一一条弧线所需的半径）
ry（同上，rx不等于ry时为椭圆）
顺时针角度（rx、ry相等时设置无效）
1大弧0小弧（使用rx、ry所画出的圆中两点之间的一侧大弧弧度还是一侧小狐弧度），示例中参数使用的0，改为1后如下图：
1顺时针0逆时针（rx、ry所画的弧度是按照顺时针方向放置还是逆时针方向放置即圆弧在半圆两条线交叉角度中是外凸还是内凹），示例中参数使用的1，改为0后如下图：
下边连线点即终点，图中3点X坐标
下边连线点即终点，图中3点Y坐标，示例中下边连线点X、Y参数使用的186.5 134，改为216.5 134后如下图：

画整半圆

//示例
<svg>//背景布<path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />//圆对象<path d="M 100 100 A 50 50 0 1 1 200 100z" stroke="black" stroke="#000" fill="green" />
</svg>

svg画半圆时使用A指令，画整圆时使用a指令，区别具体可以看 svg画整圆详解
end！！！
基础的半圆详解就到这了，有什么疑问可以留言。

推荐：svg画整圆详解

链接: svg画整圆详解.

svg画半圆详解（L指令、M指令、A指令）

svg画半圆

了解画半圆的各个指令

L指令

M指令

A指令

画整半圆

推荐：svg画整圆详解

推荐：svg的text标签字体、颜色、样式、大小、居中详解

svg画半圆详解（L指令、M指令、A指令）相关推荐

最新文章

热门文章