怎樣繪制二次貝塞爾曲線

本文轉載自查看原文 2019-09-23 13:41 831 Canvas

需要使用: quadraticCurveTo(cp1x, cp1y, x, y);

cp1x: 控制點x坐標

cp1y: 控制點y坐標

x: 結束點x坐標

y: 結束點y坐標

<!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(10, 200); //起始點
            //繪制二次貝塞爾曲線
            ctx.quadraticCurveTo(40, 100, 200, 200);
            ctx.stroke();

            // 為控制點作標記
            ctx.beginPath();
            ctx.rect(10, 200, 10, 10);
            ctx.rect(40, 100, 10, 10);
            ctx.rect(200, 200, 10, 10);
            ctx.fill();

        }
        draw();
    </script>
</body>

</html>

注意: 貝塞爾曲線的兩個定位點在兩條直線上的速度是一樣的.

免責聲明！

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

猜您在找 二次貝塞爾曲線公式怎樣繪制三次貝塞爾曲線三次貝塞爾曲線繪制算法（優化過） OpenGL 實踐之貝塞爾曲線繪制穿過已知點畫平滑曲線（3次貝塞爾曲線） WPF繪制光滑連續貝塞爾曲線用html5的canvas畫布繪制貝塞爾曲線 iOS 使用貝塞爾曲線繪制路徑談談貝塞爾曲線 Android 利用二次貝塞爾曲線模仿購物車加入物品拋物線動畫