如何通过svg画一个大圆弧

<script>
(function (){
    /**
    * 角度转化成弧度
    * @param {Number} deg - 角度
    * @return {Float} 弧度
    */
    var arc = function(deg) {
        return deg * 2 * Math.PI / 360;
    }
    /**
    * path路径属性的一些注释
    * @attribute d 路径操作
    * 
    * @function M 用来移动到指定的点,注意这个不会留下路径痕迹
    * @arg x 横坐标
    * @arg y 纵坐标
    * @example  
    *    M100 100  代表移动到 坐标x = 100, y = 100的点
    *   <path d="M100 100" fill="transparent" stroke-width="1" stroke-linecap="round" stroke="red"/>
    * 
    * @function L 用来画线,画之前需要先用M指定起始点
    * @arg x 横坐标
    * @arg y 纵坐标
    * @example 
    *   M0 0 L100 100 代表画一条线,线的终点是 x = 100, y = 100的点
    * <?xml version="1.0" standalone="no"?>
    * <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    *    <path d="M0 0 L10 10 L80 100 L20 60" stroke-width="3" stroke-linecap="round" stroke="red"fill="yellow"/>
    * </svg>
    * 
    * @function A 弧形
    * @arg rx x轴半径
    * @arg ry y轴半径
    * @arg x-axis-rotation x轴旋转角度,椭圆的时候就有效果了
    * @arg large-arc-flag 决定弧线是大于还是小于180度
    * @arg sweep-flag 表示弧线的方向 0表示从起点到终点沿逆时针画弧 1表示顺时针
    * @arg x 结束点横坐标
    * @arg y 结束点纵坐标
    * @example
    * 以下是起点坐标(74.12, 196.60),终点坐标是(125.88 196.59),的大圆弧,半径是100
    * <?xml version="1.0" standalone="no"?>
    * <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border: solid 1px black">
    *    <path d="M74.12 196.60 A100 100, 1, 1, 1, 125.88 196.59" fill="transparent" stroke-width="3" stroke-linecap="round" stroke="red"/>
    * </svg>
    */

})()
</script>
<div style="height: 300px;  300px; border: solid 1px black">
    <?xml version="1.0" standalone="no"?>
    <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border: solid 1px black">
        <path d="M74.12 196.60 A100 100, 1, 1, 1, 125.88 196.59" fill="transparent" stroke-width="3" stroke-linecap="round" stroke="red"/>
    </svg>
</div>

上面arc这个方法没有用到,写到这里是为了以后Math.sin或者Math.cos的参数是需要用弧度的。

计算坐标点的位置的时候会用得上。

原文地址:https://www.cnblogs.com/hellolol/p/10097689.html