ベジェ曲線(改) JavaScriptによって、3点の曲線を動的に線画します。ベクトル方程式は以下の通りです。 P = (1−t)2P1 + 2(1−t)tP2 + t2P3 これを座標ごとに書き直し、x1, y1, x2, y2, x3, y3 の代わりに、3つの制御点の座標を入れた方程式が、以下の通りです x = (1−t)2 * 0 + 2(1−t)t * 0.5 + t2 * 1 = (1-t)t + t2 = t y = (1−t)2 * 0 + 2(1−t)t * 1 + t2 * 0 = 2(1-t)t = –t2 + 2t このtに0から1の数字を代入し、結果を線がしてください。なお、tに代入する数字は、0→1と徐々に増えていくものとし、1に達した場合、今度は1→0に徐々に減少して行くものとします。0に達した場合、再び0→1に増加します。's game

Click here for free DL of the app version that can save data.

No:4667

7666

←

Prev Next

→

ベジェ曲線(改) JavaScriptによって、3点の曲線を動的に線画します。ベクトル方程..ALL
Developer もちきなこ｜Date and time 23/6/28 15:54:58
Build time 17.721 sec｜Game capacity 1.621KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// 制御点の座標
        const controlPoints = [
            { x: 50, y: 100 },
            { x: 200, y: 20 },
            { x: 350, y: 100 }
        ];

// ベジェ曲線の描画
        function drawBezierCurve() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
            ctx.strokeStyle = 'black';
            ctx.lineWidth = 2;

for (let t = 0; t <= 1; t += 0.01) {
                const x = Math.pow(1 - t, 2) * controlPoints[0].x + 2 * (1 - t) * t * controlPoints[1].x + Math.pow(t, 2) * controlPoints[2].x;
                const y = Math.pow(1 - t, 2) * controlPoints[0].y + 2 * (1 - t) * t * controlPoints[1].y + Math.pow(t, 2) * controlPoints[2].y;

ctx.lineTo(x, y);
            }

ctx.stroke();
        }

// アニメーションの実行
        function animate() {
            drawBezierCurve();
            controlPoints[1].y += 1; // 制御点のy座標を1増加

if (controlPoints[1].y >= 180) {
                controlPoints[1].y = 20; // y座標が一定値に達したらリセット
            }

requestAnimationFrame(animate);
        }

animate();
    </script>
</body>
</html>