canvas 画布 arcTo 方法的理解与使用

最新推荐文章于 2023-01-31 21:13:40 发布

开发路上的AZhe

最新推荐文章于 2023-01-31 21:13:40 发布

阅读量332

点赞数

分类专栏： html 文章标签： html5 html javascript

原文链接：https://codeplayer.vip/p/j7scu

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5 Canvas API中的arcTo()方法，通过实例代码展示了如何使用该方法画出平滑的曲线。arcTo()方法用于在两个指定点之间画一个圆弧，并结合半径来定义弧形的形状。文章通过四个具体的弧形绘制例子，帮助读者理解参数的意义和使用方法。

摘要由CSDN通过智能技术生成

参考文档：https://codeplayer.vip/p/j7scu

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

x1,y1 理解为端点1;
x2,y2 理解为端点2;
radius 半径是基于断点2画的一个弧

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas画布arcTo的理解与使用</title>
    <style>
        #myCanvas {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <canvas id="myCanvas" width="300" height="300"> 您的浏览器不支持canvas </canvas>
    <script>
        let canvas = document.getElementById('myCanvas');

        if (canvas.getContext) {
            let ctx = canvas.getContext('2d');
            ctx.moveTo(60, 30); //设置起始点，起始点的x是最后一个弧的x2
            /*
            arcTo(x1,y1,x2,y2,radius);
        
            x1,y1 理解为端点1;
            x2,y2 理解为端点2;
            radius 半径是基于断点2画的一个弧
        
            端点1可以想象成一个长方形的直角顶点
            端点2是端点1要去方向的终点
            端点2的延伸要依据radius，这样才能画一个规则的弧
            */
            ctx.arcTo(200, 30, 200, 60, 30);
            /*
                设置好第一个弧（右上角）
                端点1{x:200,y:30}
                端点2{x:200,y:60} //刚好一个圆
             */


            ctx.arcTo(200, 200, 170, 200, 30);
            /*
                第二个弧（右下角）
                端点1{x:200,y:200}  //这边这个y决定你要画的【高】
                端点2{x:170,y:200}  //x2 = y1-radius;
            */

            ctx.arcTo(30, 200, 30, 170, 30);
            ctx.arcTo(30, 30, 60, 30, 30);
            /*
                三弧和四弧依上类推
             */

            ctx.strokeStyle = "blue"; //设置绘制颜色
            ctx.stroke();
        }
    </script>
</body>

</html>

画一个理解图

开发路上的AZhe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 画布 arcTo 方法的理解与使用

参考文档：https://codeplayer.vip/p/j7scuarcTo(x1,y1,x2,y2,radius);x1,y1 理解为端点1;x2,y2 理解为端点2;radius 半径是基于断点2画的一个弧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
复制链接

扫一扫

专栏目录