Create an HTML file that implements a Bezier curve animation, using JavaScript to dynamically change the coordinates of four control points to generate a Bezier curve line drawing.'s game

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

No:4420

1820

←

Prev Next

→

Create an HTML file that implements a Bezier curve..ALL
Developer もちきなこ｜Date and time 23/6/27 23:55:36
Build time 42.872 sec｜Game capacity 3.557KB｜

Script

了解しました。以下はベジェ曲線のアニメーションを実装したHTMLファイルの例です。JavaScriptを使用して、4つの制御点の座標を動的に変更し、ベジェ曲線の線画を生成しています。

このコードでは、canvas要素を使用してベジェ曲線を描画しています。4つの制御点の座標を保持する配列を作成し、マウスでドラッグして制御点の位置を変更できるようにしています。また、requestAnimationFrameを使用してアニメーションのループを実装しています。絵文字を使用することはできませんが、スマホでも操作可能なゲームとして遊べます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
	<title>ベジェ曲線のアニメーション</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			display: block;
			margin: auto;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

// 初期の制御点の座標
		let controlPoints = [
			{x: 50, y: 50},
			{x: 200, y: 100},
			{x: 300, y: 300},
			{x: 400, y: 150}
		];

// 制御点を描画する関数
		function drawControlPoints() {
			context.fillStyle = 'red';
			context.strokeStyle = 'black';

for (let i = 0; i < controlPoints.length; i++) {
				context.beginPath();
				context.arc(controlPoints[i].x, controlPoints[i].y, 5, 0, 2 * Math.PI);
				context.stroke();
				context.fill();
			}
		}

// ベジェ曲線を描画する関数
		function drawBezierCurve() {
			context.strokeStyle = 'blue';
			context.lineWidth = 3;

context.beginPath();
			context.moveTo(controlPoints[0].x, controlPoints[0].y);

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

context.lineTo(currentX, currentY);
			}

context.stroke();
		}

// マウスで制御点をドラッグしたときの処理
		let dragIndex = -1;

canvas.addEventListener('mousedown', function(event) {
			let mouseX = event.clientX - canvas.getBoundingClientRect().left;
			let mouseY = event.clientY - canvas.getBoundingClientRect().top;

for (let i = 0; i < controlPoints.length; i++) {
				let distance = Math.sqrt(Math.pow(mouseX - controlPoints[i].x, 2) + Math.pow(mouseY - controlPoints[i].y, 2));
				if (distance < 8) {
					dragIndex = i;
					break;
				}
			}
		});

canvas.addEventListener('mousemove', function(event) {
			if (dragIndex >= 0) {
				controlPoints[dragIndex].x = event.clientX - canvas.getBoundingClientRect().left;
				controlPoints[dragIndex].y = event.clientY - canvas.getBoundingClientRect().top;

context.clearRect(0, 0, canvas.width, canvas.height);
				drawControlPoints();
				drawBezierCurve();
			}
		});

canvas.addEventListener('mouseup', function(event) {
			dragIndex = -1;
		});

// アニメーションのループ
		function loop() {
			requestAnimationFrame(loop);

context.clearRect(0, 0, canvas.width, canvas.height);
			drawControlPoints();
			drawBezierCurve();
		}

loop();
	</script>
</body>
</html>
```