シェルピンスキーのカーペット|HTML5

シェルピンスキーのカーペット|HTML5

シェルピンスキーのカーペット(HTML5, JavaScript, CSS3) : デモ

シェルピンスキーのカーペット(HTML5, JavaScript, CSS3) : ZIPファイル(4kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>シェルピンスキーのカーペット | Sierpinski's Carpet</title>
		<link href="css/base.css" rel="stylesheet" type="text/css">
		<script src="js/base.js"></script>
	</head>
	<body>
		<div id="contents">
			<canvas id="canvas" width="300" height="300">
			</canvas>
		</div>
	</body>
</html>

2.CSS

@charset "utf-8";

body
{
	margin:0;
	padding:0;
	background-color: #fff;
	font-family:Helvetica, HiraKakuProN-W3, sans-serif; 
	font-size:25px;
	color:#fff;
}

#contents
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
	border: 1px solid #000;
	overflow:hidden;
}

#canvas
{
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height:300px;
}

3.JavaScript

base.js

window.addEventListener("load", init, false);

function init()
{
	var theCanvas = document.getElementById("canvas");
	var centerX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
	centerX = Number(centerX.replace('px',''));
	centerX =  centerX / 2;
	centerX = 25;
	var centerY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
	centerY = Number(centerY.replace('px',''));
	centerY =  centerY / 2;
	centerY = 25;
	var ctx = theCanvas.getContext("2d");
	
	
	var X = 0;
	var Y = 0;
	var L = 0;
	
	
	carpet(0,0,Math.pow(3,5));
	
	
	function carpet(X,Y,L)
	{
		if(L<2)
		{
			return;
		}
		
		var L1=L/3;
		var XX=X;
		
		for(var i=1; i<=3; i++)
		{
			var YY = Y;
			for(var j=1; j<=3; j++)
			{
				if(i==2 && j==2)
				{
					draw(centerX+XX,centerY+YY,L1);
				}
				else
				{
					carpet(XX,YY,L1);
					
				}
				YY = YY+L1;
			}
			XX=XX+L1;
		}
	}
	
	
	function draw(X,Y,L)
	{
		ctx.strokeStyle="#000000";
		ctx.lineWidth=1;
		ctx.fillStyle = "#000000";
		ctx.beginPath();
		ctx.moveTo(X, Y);
		ctx.lineTo(X + L, Y);
		ctx.lineTo(X + L, Y + L);
		ctx.lineTo(X, Y + L);
		ctx.lineTo(X, Y);
		ctx.fill();
		ctx.closePath();
		ctx.stroke();
	}
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です