曲線ラインアート Windowsのスクリーンセーバーの『ラインアート』のような、自動的に線画され続けるランダムなラインアートを表示します。ラインアートはJavaScriptによって線画されます。ラインアートは曲線であり、線が途切れることはありません。ゆっくりと、新しく線を引くように線画され続けます。ラインアートの色は徐々に変化します。また、最初の色は赤色です's game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
曲線ラインアート Windowsのスクリーンセーバーの『ラインアート』のような、自動的に線画され続けるランダムなラインアートを表示します。ラインアートはJavaScriptによって線画されます。ラインアートは曲線であり、線が途切れることはありません。ゆっくりと、新しく線を引くように線画され続けます。ラインアートの色は徐々に変化します。また、最初の色は赤色です's game | AI game creator

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

No:3129

3603

←

Prev Next

→

曲線ラインアート Windowsのスクリーンセーバーの『ラインアート』のような、自動的に線画され続..ALL
Developer もちきなこ｜Date and time 23/6/23 22:26:05
Build time 19.849 sec｜Game capacity 1.855KB｜

Script

以下が、要件を満たしたプログラムの例です（絵文字は使用していません）。

このプログラムでは、canvas要素を使用して画面に線画を描画します。drawLine関数は、指定された始点、長さ、角度で線を描画し、再帰的に下位レベルの線分を描画します。draw関数は、画面が更新されるたびに線画を再描画します。また、hue変数を使用して、線画の色を徐々に変化させます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

以下が、要件を満たしたプログラムの例です（絵文字は使用していません）。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>曲線ラインアート</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			width: 100vw;
			height: 100vh;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		let hue = 0;

function draw() {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			const center = {
				x: canvas.width / 2,
				y: canvas.height / 2
			};
			const len = window.innerWidth > window.innerHeight ? window.innerWidth * 0.25 : window.innerHeight * 0.25;
			drawLine(center.x, center.y - len, len, -Math.PI / 2);
			requestAnimationFrame(draw);
		}

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