メンガーのスポンジ|HTML5

メンガーのスポンジ|HTML5

メンガーのスポンジ(HTML5, JavaScript, CSS3) : デモ

メンガーのスポンジ(HTML5, JavaScript, CSS3) : ZIPファイル(5kb)

1.HTML

<!DOCTYPE html>
<html lang="jp">
	<head>
		<meta charset="UTF-8" />
		<title>メンガーのスポンジ | Menger's Sponge</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="350" height="350">
			</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:#000;
}

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

#canvas
{
	position: absolute;
	top: 0;
	left: 0;
	width: 350px;
	height:350px;
	-webkit-transform: scaleY(-1);
}

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 = 46;
	//var centerY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
	//centerY = Number(centerY.replace('px',''));
	//centerY =  centerY / 2;
	centerY = 46;
	var ctx = theCanvas.getContext("2d");
	
	var c1 = '#ff0000';//front
	var c2 = '#00ff00';//top
	var c3 = '#0000ff';//side
	
	carpet(0,0,0,Math.pow(3,5));
	
	function carpet(X,Y,Z,L)
	{
		if(L<4)
		{
			drawCell(centerX+X,centerY+Y,centerX+Z,L);
		}
		else
		{
			var LL = L/3;
			var XX = X;
			var YY = Y;
			for(var j=1;j<=3;j++)
			{
				var ZZ = Z;
				for(var k=1; k<=3;k++)
				{
					if(j!=2 || k!=2)
					{
						carpet(XX,YY,ZZ,LL)
					}
					ZZ=ZZ+LL;
				}
				YY = YY+LL;
			}
			
			XX=XX-LL/3;
			YY=Y;
			for(j=1;j<=3;j++)
			{
				ZZ=Z;
				for(k=1;k<=3;k++)
				{
					if(j!=2 && k!=2)
					{
						carpet(XX,YY,ZZ,LL);
					}
					ZZ=ZZ+LL;
				}
				YY = YY+LL;
			}
			XX=XX-LL/3;
			YY=Y;
			for(j=1;j<=3;j++)
			{
				ZZ=Z;
				for(k=1;k<=3;k++)
				{
					if(j!=2||k!=2)
					{
						carpet(XX,YY,ZZ,LL);
					}
					ZZ=ZZ+LL;
				}
				YY=YY+LL;
				
			}
		}
	}
	
	
	function drawCell(XX,YY,ZZ,W)
	{
		X = XX + YY;
		Y = ZZ + XX;
		var DL =W/3;
		var X0 = X;
		var X1 = X+DL;
		var X2 =X+3*DL;
		var X3 =X2+DL;
		var Y0 = Y;
		var Y1 = Y+DL;
		var Y2 =Y+3*DL;
		var Y3 =Y2+DL;
		
		ctx.strokeStyle=c3;
		ctx.lineWidth=1;
		ctx.fillStyle = c3;
		ctx.beginPath();
		ctx.moveTo(X2, Y1);
		ctx.lineTo(X3, Y1);
		ctx.lineTo(X3, Y2);
		ctx.lineTo(X2, Y2);
		ctx.lineTo(X2, Y1);
		ctx.fill();
		ctx.closePath();
		ctx.stroke();
		
		ctx.strokeStyle=c1;
		ctx.lineWidth=1;
		ctx.fillStyle = c1;
		ctx.beginPath();
		ctx.moveTo(X0, Y0);
		ctx.lineTo(X2, Y0);
		ctx.lineTo(X2, Y2);
		ctx.lineTo(X0, Y2);
		ctx.lineTo(X0, Y0);
		ctx.fill();
		ctx.closePath();
		ctx.stroke();
		
		ctx.strokeStyle=c2;
		ctx.lineWidth=1;
		ctx.fillStyle = c2;
		ctx.beginPath();
		ctx.moveTo(X1, Y2);
		ctx.lineTo(X3, Y2);
		ctx.lineTo(X3, Y3);
		ctx.lineTo(X1, Y3);
		ctx.lineTo(X1, Y2);
		ctx.fill();
		ctx.closePath();
		ctx.stroke();
		
		
		
	}
}

コメントを残す

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