JavaScriptで始点・終点・2つの制御点と補助線、ベジェ曲線を描くサンプル


<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
        const canvas = document.getElementById('myCanvas');
        const context = canvas.getContext('2d');

        const p1 = { x: 10, y: 10 };    //始点
        const p2 = { x: 380, y: 380 };  //終点
        const cp1 = { x: 60, y: 360 };  //制御点1
        const cp2 = { x: 340, y: 10 };  //制御点2

        // 補助線の描画
        [[p1, cp1], [p2, cp2]].forEach(function (p) {
            context.beginPath();
            context.moveTo(p[0].x, p[0].y);
            context.lineTo(p[1].x, p[1].y);
            context.lineWidth = 5;
            context.strokeStyle = 'gray';
            context.stroke();
        });

        // ベジェ曲線の描画
        context.beginPath();
        context.moveTo(p1.x, p1.y);
        context.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, p2.x, p2.y);
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();

        // 点の描画
        [p1, p2, cp1, cp2].forEach(function (p) {
            context.beginPath();
            context.arc(p.x, p.y, 10, 0, Math.PI * 2, false);
            context.fillStyle = 'blue';
            context.fill();
        });
</script>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です