HTML5之arcTo()函数

最新推荐文章于 2024-07-14 14:30:45 发布

. . . . .

最新推荐文章于 2024-07-14 14:30:45 发布

阅读量2.6k

点赞数 3

文章标签： html5

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/70230919

版权

此文参考链接

这里只是对上面参考链接的补充，先有个大致的掌握。
首先，参数该函数的参数如下：

    ctx.arcTo(x1,y1,x2,y2,radius);

(x1,y1)起点坐标，(x2,y2)终点坐标，radius半径。

这时正常人都会有疑惑，已知两个点和半径就可以画弧线？当然不是！！这也是很多书上没有讲清楚的。
如果没有指明第三个点，那么这个点默认是原点(DOM的左上角位置)。
例如：我想画一个arc(100,20,100,70,50)这样一段弧，那么我应该这样做：
ps:时间仓促，来不及解释了。

先画出arcTo函数里的两点的连线，再画arcTo函数里第一个点和原点的连线，然后在这个夹角内做半径为50px的圆弧，并且和两条线相切。

验证：

实验代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>arcTo函数</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
<canvas id="myCanvas" width="500" height="600">
    您的浏览器不支持canvas
</canvas>
<script type="text/javascript">
    var canv = document.getElementById("myCanvas");
    var ctx = canv.getContext("2d");

    ctx.moveTo(0,0);
    ctx.lineTo(100,20);
    ctx.lineTo(100,70);
    ctx.stroke();

    ctx.beginPath();
    ctx.save();
    ctx.strokeStyle = "red";
    ctx.moveTo(0,0);
    ctx.arcTo(100,20,100,70,50);
    ctx.stroke();
    ctx.restore();


</script>

</body>
</html>

运行效果如下：

这里写图片描述

. . . . .

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5之arcTo()函数

此文参考链接这里只是对上面参考链接的补充，先有个大致的掌握。首先，参数该函数的参数如下： ctx.arcTo(x1,y1,x2,y2,radius);(x1,y1)起点坐标，(x2,y2)终点坐标，radius半径。这时正常人都会有疑惑，已知两个点和半径就可以画弧线？当然不是！！这也是很多书上没有讲清楚的。如果没有指明第三个点，那么这个点默认是原点(DOM的左上角位置)。例如：我想
复制链接

扫一扫