canvas – 3次ベジェ曲線 – propansystem プロパンシステム

canvas – 3次ベジェ曲線

3次ベジェ曲線を試します。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    // canvasのDOMを取得
    const canvas = document.getElementById('canvas');
    
    // getContextメソッドでコンテキストを取得
    // ここでは2次元の平面的な図形を扱うので、引数に「2d」を指定
    const ctx = canvas.getContext('2d');
    
    // コンテキストのstyleを定義
    // パスの開始
    ctx.beginPath();

    // 3次曲線の例
    ctx.moveTo(10, 10);
    ctx.bezierCurveTo(30, 30, 30, 30, 50, 50);
    ctx.bezierCurveTo(70, 70, 50, 45, 20, 60);

    // パスを線で描画する
    ctx.stroke();
</script>
</body>
</html>

サーバ上のHTMLはこちら(test1.html)

画面にアクセスすると3次ベジェ曲線が描画されます。

canvas – 3次ベジェ曲線

コメントを残す