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

No:3514

8132

←

Prev Next

→

JavaScriptお絵描き JavaScriptによって線画された、様々な図形を表示します。 ..ALL
Developer もちきなこ｜Date and time 23/6/25 10:28:59
Build time 21.151 sec｜Game capacity 2.069KB｜

Script

JavaScriptお絵描き

以下に、ランダムに線画された様々な図形を表示します。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>JavaScriptお絵描き</title>
	<meta charset="UTF-8">
	<style>
		canvas{
			border: 1px solid black;
			margin: auto;
			display: block;
		}
		button{
			margin: 10px;
			padding: 10px;
			font-size: 20px;
			background-color: #4CAF50;
			color: white;
			border-radius: 5px;
			border: none;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>JavaScriptお絵描き</h1>
	<p>以下に、ランダムに線画された様々な図形を表示します。</p>
	<canvas id="myCanvas" width="300" height="300"></canvas>
	<button id="randomButton">他も見る！</button>
	<script>
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");

var randomShape = "";
		drawShape();
		
		document.getElementById("randomButton").addEventListener("click", function(){
			drawShape();
		});

function drawShape(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			randomShape = Math.floor(Math.random() * 5) + 1;
			switch(randomShape){
				case 1:
				//図形1
				ctx.beginPath();
				ctx.moveTo(50, 50);
				ctx.lineTo(200, 50);
				ctx.lineTo(150, 150);
				ctx.lineTo(100, 150);
				ctx.closePath();
				ctx.stroke();
				break;

case 2:
				//図形2
				ctx.beginPath();
				ctx.moveTo(50, 50);
				ctx.lineTo(200, 50);
				ctx.lineTo(125, 150);
				ctx.closePath();
				ctx.stroke();
				break;

case 3:
				//図形3
				ctx.beginPath();
				ctx.moveTo(75, 100);
				ctx.lineTo(125, 50);
				ctx.lineTo(175, 100);
				ctx.lineTo(125, 150);
				ctx.closePath();
				ctx.stroke();
				break;

case 4:
				//図形4
				ctx.beginPath();
				ctx.moveTo(50, 50);
				ctx.lineTo(250, 50);
				ctx.moveTo(50, 150);
				ctx.lineTo(250, 150);
				ctx.moveTo(50, 250);
				ctx.lineTo(250, 250);
				ctx.stroke();
				break;

case 5:
				//図形5
				ctx.beginPath();
				ctx.moveTo(100, 50);
				ctx.lineTo(200, 150);
				ctx.lineTo(100, 250);
				ctx.lineTo(50, 200);
				ctx.lineTo(100, 150);
				ctx.closePath();
				ctx.stroke();
				break;
			}
		}
	</script>
</body>
</html>