HTML5 canva arc()方法详解

最新推荐文章于 2024-04-03 08:53:35 发布

白白凉铁血

最新推荐文章于 2024-04-03 08:53:35 发布

阅读量478

点赞数

本文链接：https://blog.csdn.net/CikT_/article/details/116124058

版权

HTML5 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

arc

1 篇文章 0 订阅

订阅专栏

arc()方法定义中心点，半径，开始点和结束点，为当前画布添加一条弧。

语法

arc(x,y,r,startAngle,endAngle，true/false)

参数

参数	描述
x，y	定义弧的圆心坐标
r	定义弧半径
starAngle	弧开始点的一个角度，以弧度计
endAngle	弧结束点的一个角度，以弧度计
true/false	弧的方向，顺时针（true），逆时针（false）

示例

使用arc()画一个圆，圆心为150，100。半径为4，顺时针(true),起始点为0(0* Math.PI)，结束点为2*Math.PI。
转自https://www.w3school.com.cn/i/arc.gif

<body>
    <canvas id="MyCanvas" style="border: 1px solid black;"
     width="300" height="200">
     </canvas>
    <script>
        var x = document.getElementById("MyCanvas");
        var context = x.getContext("2d");
        context.arc(150, 100, 40, 0, 2 * Math.PI, true);
        context.stroke();
    </script>
</body>

运行图
在这里插入图片描述

当起始点为Math.PI/2时，起始点实际为0.5*Math.PI。当Math.PI *i时，为180°/i，以0开始顺时针到180/i，此的位置为当前arc()的起始角。然后使用true/false决定到达结束角顺逆方向。
(此处为个人理解，如有大佬发现错误我会及时更改，谢谢）

<body>
    <canvas id="MyCanvas" style="border: 1px solid black;"
     width="300" height="200">
     </canvas>
    <script>
        var x = document.getElementById("MyCanvas");
        var context = x.getContext("2d");
        context.arc(150, 100, 40, Math.PI / 4, Math.PI, true);
        context.stroke();
    </script>
</body>