怎樣繪制一個與兩條直線相切的圓弧

本文轉載自查看原文 2019-09-23 13:20 776 Canvas

需要使用ctx.arcTo(), 參數是兩個控制點的坐標, 比如下面的例子:

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <canvas id="canv" width="300" height="300"></canvas>
    <script>
        function draw() {
            var canvas = document.getElementById('canv');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(50, 50);
            //參數1、2：控制點1坐標   參數3、4：控制點2坐標  參數4：圓弧半徑
            ctx.arcTo(200, 50, 200, 200, 140);
            ctx.lineTo(200, 200)
            ctx.stroke();

            // 繪制控制點
            ctx.beginPath();
            ctx.rect(50, 50, 5, 5);
            ctx.rect(200, 50, 5, 5)
            ctx.rect(200, 200, 5, 5)
            ctx.fill();
        }
        draw();
    </script>
</body>

</html>

注意:

1. ctx.arcTo() 可以繪制與兩條直線相切的圓弧;

2. ctx.rect() 可以繪制閉合的矩形;

function draw() {
    var canvas = document.getElementById('canv');
    if (!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.rect(100, 100, 100, 50);
    ctx.stroke();
}
draw();

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS計算兩條直線的夾角 javascript計算兩條直線的夾角計算兩條直線的交點(C#) C# 判斷兩條直線是否相交求兩條直線交點的正確姿勢數學篇求兩條直線的交點,說明過程 python已知經緯度，求大圓弧距離以及兩條大圓弧交點的經緯度(numpy實現) 點和圓相切的兩個切點坐標 Python 如何判斷一條直線是圓弧【原創】已知四個坐標點求其兩條直線交點坐標