当前位置: 首页 > 知识库问答 >
问题:

javascript - svg的path绘制整个圆弧,或者大圆弧(超过180度),必须用两个a命令吗?

屠华辉
2024-06-06

如下所示绘制整圆弧的方法,能否只用一个a命令绘制一个整圆弧,或者大于180度的圆弧?

<svg width="100px" height="100px" viewBox="0 0 200 200">    <path d="M 100 100 m -75 0 a 75 75 0 1 0 150 0 a 75 75 0 1 0 -150 0"          fill="none" stroke="orange" stroke-width="10"/></svg>

共有4个答案

壤驷安和
2024-06-06

小编认为在 SVG 中绘制完整的圆弧(大于 180 度的圆弧),只能使用两个a命令。SVG 的<path>元素中的弧线命令a(或A)只能绘制小于等于180度的弧段。因此,为了绘制完整的圆或大于180度的圆弧,需要使用两个弧线命令来组合。

例如,绘制一个完整的圆弧(360度)的方式如下:

<svg width="100px" height="100px" viewBox="0 0 200 200">    <path d="M 100 100 m -75 0              a 75 75 0 1 0 150 0              a 75 75 0 1 0 -150 0"          fill="none" stroke="orange" stroke-width="10"/></svg>

在这个示例中,使用了两个a命令来绘制两个180度的弧段,从而组合成一个完整的圆。

要绘制大于180度但小于360度的圆弧,仍然需要使用两个或更多的a命令。例如,绘制一个270度的圆弧:

<svg width="100px" height="100px" viewBox="0 0 200 200">    <path d="M 100 100 m -75 0              a 75 75 0 0 1 150 0              a 75 75 0 0 1 -150 0              a 75 75 0 0 1 75 -75"          fill="none" stroke="orange" stroke-width="10"/></svg>

在此示例中,使用了三个a命令来绘制三个90度的弧段,从而组合成一个270度的弧。

总结来说,由于SVG的弧线命令限制为绘制小于等于180度的弧段,因此绘制完整的圆弧或大于180度的弧段时,必须使用多个a命令。无法只使用一个a命令来绘制完整的圆弧或大于180度的圆弧。

夏弘义
2024-06-06

可以画一个非常接近的圆,然后关闭路径:

<svg width="500" height="500" viewBox="0 0 200 200">    <path d="M 100 100 m -75 0 a 75 75 0 1 1 0 1 z"          fill="none" stroke="orange" stroke-width="1"/></svg>
龙佐
2024-06-06

SVG 路径 | MDN

A rx ry x-axis-rotation large-arc-flag sweep-flag x ya rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

large-arc-flag 决定弧线是大于还是小于 180 度,0 表示小角度弧,1 表示大角度弧。sweep-flag 表示弧线的方向,0 表示从起点到终点沿逆时针画弧,1 表示从起点到终点沿顺时针画弧。

南宫建白
2024-06-06

从数学的角度出发,结合使用a命令画一个整圆,
那就是给定一个点(开始画图的点和终点相同),给定一个圆的半径,
可以过这个点作无数的圆,
那程序咋知道你要画哪个圆呢?��


画个超过180的圆弧,可以指定画优弧和顺/逆时针,这样就能画好了

 类似资料:
  • 圆弧被定义为假想的圆周上任意两点之间的部分。Canvas的API提供了两个绘制圆弧的方法:arc()和arcTo()方法。 arc()方法 使用arc()方法绘制圆弧时,假想的圆由圆心和半径来定义,两个点由起始角度和结束角度来定义,还需要一个参数来定义绘制方向。故,arc()方法的格式为: arc(x, y, radius, startAngle, endAngle [, anticlockwi

  • 使用HTML5画布时,有时候需要绘制完美的圆弧。如果你对绘制彩虹、笑脸、图表等感兴趣,本节将是你努力的起点。 图1-3 绘制圆弧 绘制步骤 按照以下步骤绘制一条圆弧: 1. 定义2D画布并设置圆弧样式: window.onload  = function(){ var canvas  = document.getElementById("myCanvas"); var context 

  • 高级路径 今天开始,我们就要征战路径最后也是最难的部分了——高级路径。之前我们学习的都是绘制线条(基本路径),接下来的四节课我们详细看看绘制曲线(高级路径)的有关方法。 剧透一下,主要有四个方法: 标准圆弧:arc() 复杂圆弧:arcTo() 二次贝塞尔曲线:quadraticCurveTo() 三次贝塞尔曲线:bezierCurveTo() 在开始之前,我们优化一下我们的作图环境。灵感来自于上

  • arcTo()介绍 arcTo()方法接收5个参数,分别是两个切点的坐标和圆弧半径。这个方法是依据切线画弧线,即由两个切线确定一条弧线。 具体如下。 arcTo(x1,y1,x2,y2,radius) 这个函数以给定的半径绘制一条弧线,圆弧的起点与当前路径的位置到(x1, y1)点的直线相切,圆弧的终点与(x1, y1)点到(x2, y2)的直线相切。因此其通常配合moveTo()或lineTo(

  • 我想在两点之间画一条弧线。我知道两个点的位置和弧度的角度。我成功地写了一个小程序来计算圆心,有效地画出了圆弧。但是当我画一个圆来验证时,当我用小的弧度值时,圆线不交叉给出的两点。 但两点到圆心的距离等于计算半径。我哪里错了?

  • 主要内容:弧形,圆形,示例,实例-2弧形 以下代码显示如何绘制以,为中心,半径为并从角度延伸到角度(270度长)的圆弧。 上面的代码生成以下结果。 圆形 类创建一个新的圆,其中指定的半径和中心位置以像素为单位。 上面的代码生成以下结果。 示例 以下代码显示了如何使用构造函数传递半径和中心。 上面的代码生成以下结果。 实例-2 圈形与DropShadow,如下代码所示 - 方法返回节点的边界区域,例如其宽度和高度。计算包括节点的实际尺

  • 我试图画一个圆弧,基于两个给定的点和一个给定的高度来描述一个圆段。为了实现这一点,我将使用java.awt.graphics中的以下方法。 首先,我观察到x、y、width和height值描述了一个包含圆的矩形。 圆弧的中心是原点为(x,y)的矩形的中心,其大小由width和height参数指定。(http://docs.oracle.com/javase/7/docs/api/java/awt/

  • 我到底需要在椭圆形矩形中设置什么,以及如何计算起始角和扫掠角? 我尝试了下面的代码: