arcTo()画弧线

最新推荐文章于 2024-05-27 14:48:10 发布

雅痞子军

最新推荐文章于 2024-05-27 14:48:10 发布

阅读量1.2k

点赞数

分类专栏： JavaScript HTML5

本文链接：https://blog.csdn.net/qq_1724201421/article/details/80201261

版权

在Canvas中，可以使用arcTo()方法来画一条弧线。

语法：

 cxt.arcTo(cx,cy,x2,y2,radius);

说明：

（cx,cy）表示控制点的坐标，（x2,y2）表示结束点的坐标，radius表示圆弧的半径。如果我们想要画一条弧线，需要提供三个点的坐标：开始点、控制点和结束点。其中一般由moveTo()或lineTo()提供开始点，arcTo()提供控制点和结束点。

arcTo()方法就是利用“开始点”、“控制点”和“结束点”这三个点所形成的夹角，然后绘制一段与夹角的两边相切并且半径为radius的圆弧。其中，弧线的起点是“开始点所在边与圆的切点”，而弧线的终点是“结束点所在边与圆的切点”。

arcTo()方法绘制的弧线是两个切点之间长度最短的那个圆弧。此外，如果开始点不是弧线起点，arcTo()方法还将添加一条当前端点到弧线起点的直线线段。也就是说，开始点坐标不一定是弧线起点坐标。

例如下面一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>arcTo()画弧线</title>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        window.οnlοad=function(){
            v

最低0.47元/天解锁文章

雅痞子军

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
arcTo()画弧线

在Canvas中，可以使用arcTo()方法来画一条弧线。语法： cxt.arcTo(cx,cy,x2,y2,radius);说明：（cx,cy）表示控制点的坐标，（x2,y2）表示结束点的坐标，radius表示圆弧的半径。如果我们想要画一条弧线，需要提供三个点的坐标：开始点、控制点和结束点。其中一般由moveTo()或lineTo()提供开始点，arcTo()提供控制点和结束点。arcTo()方...
复制链接

扫一扫