プログラミングとイラストレーション » HTMLのCanvasに黄金三角形の螺旋を描く
プログラミングとイラストレーション > HTML5 > HTMLのCanvasに黄金三角形の螺旋を描く

HTMLのCanvasに黄金三角形の螺旋を描く

HTMLのCanvasに黄金三角形の螺旋を描く

今回は、HTMLのCanvasに、黄金三角形に沿った黄金螺旋を描きます。

HTMLのCanvasに黄金三角形の螺旋を描く : デモ

HTMLのCanvasに黄金三角形を再帰的に描く : ZIPファイル(4kb)

HTMLのCanvasに黄金三角形の螺旋を描くための参考図

1.HTML

<!doctype html> <!-- 標準モードでWebページをレンダリング -->
<html lang="ja"> <!-- 言語指定付きのhtml要素 -->
	<head> <!-- ヘッダーの指定 HTMLページの生成に必要な情報を記述 -->
		<meta charset="UTF-8"> <!-- Web上の文字エンコーディングの指定 -->
		<title>HTMLのCanvasに黄金螺旋を描く</title> <!-- ブラウザの上部ウィンドウのバーに表示されるタイトル -->
        <link href="css/base.css" rel="stylesheet" type="text/css"> <!-- cssファイル(デザインの仕様)の読み込み -->
		<script src="js/base.js"></script> <!-- JavaScriptファイル(制御の仕様)の読み込み -->
	</head>

    <body> <!-- HTMLページのメインコンテンツを示す要素 -->
        <canvas id = "viewArea" width = "275" height = "275"></canvas> <!-- 描画領域 -->
    </body>
</html>

2.CSS

@charset "UTF-8";

body /* bodyのデザイン */
{
	margin:0; /* borderより外側の余白は0 */
	padding:0; /* borderより内側の余白は0 */
	background-color: #fff; /* 背景色は白 */ 
	-webkit-transform:translateZ(0px); /* GPUの機能を使う */
}

#viewArea /* id名「viewArea」が付いたCanvas要素(タグ)のデザイン */
{
	position: absolute; /* 配置方法は絶対値 */
	top: 10px; /* Webのページの上から10ピクセルの位置 */
	left: 10px; /* Webのページの左から10ピクセルの位置 */
	width: 275px; /* 幅は275ピクセル */
	height: 275px; /* 高さは275ピクセル */
	border: 1px solid #000; /* 線は1ピクセルの太さで、実線、色は黒。上下左右に引く */
}

3.JavaScript

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

function init()
{
	//変数の定義
	var centerX = 0,
	centerY = 0,
	ctx = null,
	theCanvas = null;
	
	//MVCデザインパターンの宣言
	function View(){}; //外観の処理を行うオブジェクトのグループ
	//function Controller(){}; //インタラクティブな制御を行なうオブジェクトのグループ(今回は使いません)
	function Model(){}; //ロジックの処理を行うオブジェクトのグループ
	
	//視覚の処理を行うオブジェクトのグループ
	View =
	{
		//空のinit関数を作る
		init : function()
		{
				
		}
	}
	
	//Viewの中の関数(init)にプロトタイプの変数や関数を定義します
	//プロトタイプには、インスタンスで使う共有の関数や変数を設定します
	View.init.prototype.draw = function()
	{
		var dis = 200; //図形の中心位置(o)から各点までの位置の距離
		var fai = ((1 + Math.sqrt(5)) / 2); //黄金比率
				
		var x = 0;
		var y = 0;
		ctx.lineWidth=1;
		ctx.strokeStyle="#000000";
		ctx.beginPath();
		ctx.moveTo(centerX + x, centerY + y);
		
		var deg = 72;
		x = Math.cos(deg * Math.PI / 180) * dis + x;
		y = Math.sin(deg * Math.PI / 180) * dis + y;
		ctx.lineTo(centerX + x, centerY + y);
				
		deg += 108;
		x = Math.cos(deg * Math.PI / 180) * (dis/fai) + x;
		y = Math.sin(deg * Math.PI / 180) * (dis/fai) + y;
		ctx.lineTo(centerX + x, centerY + y);
		ctx.stroke();
		
		var d = 0;
		for (var i = 0; i < 10; i++)
		{
			//Triangle draw
			deg += 108;
			dis = dis / fai;
			ctx.lineWidth=1;
			ctx.strokeStyle="#000000";
			ctx.beginPath();
			ctx.moveTo(centerX + x, centerY + y);
			x = Math.cos(deg * Math.PI / 180) * (dis/fai) + x;
			y = Math.sin(deg * Math.PI / 180) * (dis/fai) + y;
			ctx.lineTo(centerX + x, centerY + y);
			ctx.stroke();
			var x0 = Math.cos(deg * Math.PI / 180) * (dis) + x;
			var y0 = Math.sin(deg * Math.PI / 180) * (dis) + y;
			
			ctx.lineWidth=1;
			ctx.strokeStyle="#000000";
			ctx.beginPath();
			ctx.moveTo(centerX + x, centerY + y);
			ctx.lineTo(centerX + x0, centerY + y0);
			ctx.stroke();

			//Spiral draw
			ctx.lineWidth=1;
			ctx.strokeStyle="#ff0000";
			ctx.beginPath();
			ctx.moveTo(centerX + x0, centerY + y0);
			d = deg;
			for (var j = 0; j <= 108; j++)
			{
				d++;
				x0 = Math.cos(d * Math.PI / 180) * (dis) + x; //x:そのときの中心座標x
				y0 = Math.sin(d * Math.PI / 180) * (dis) + y; //y:そのときの中心座標y
				ctx.lineTo(centerX + x0, centerY + y0);
			}
			ctx.stroke();
		}
		ctx.strokeStyle="#000000";
		ctx.moveTo(centerX + x, centerY + y);
		ctx.lineTo(centerX + x0, centerY + y0);
		ctx.stroke();
	}
	
	//ロジックの処理を行うオブジェクトのグループ
	Model = 
	{
		//空のinit関数を作る
		init: function()
		{

		}
	}
			
	//Modelの中の関数(init)にプロトタイプの変数や関数を定義します
	//プロトタイプには、インスタンスで使う共有の関数や変数を設定します
	Model.init.prototype.ready = function()
	{
		//Canvasのエレメント要素を変数に代入する
		theCanvas = document.getElementById("viewArea");

		//Canvasタグで2次元描画を行ないます
		ctx = theCanvas.getContext("2d");
		
		//Canvasの中心座標を取得
		//centerX: Canvasタグの横幅の1/2を取得
		var offsetX = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).width;
		offsetX = Number(offsetX.replace('px',''));
		centerX =  offsetX / 2;
		
		//centerY: Canvasタグの高さの1/2を取得
		var offsetY = (theCanvas.currentStyle || document.defaultView.getComputedStyle(theCanvas,'')).height;
		offsetY = Number(offsetY.replace('px',''));
		centerY =  offsetY / 2;
		centerY -= 100;
	}
	
	//Modelの中のInit関数のインスタンスを生成
	var model = new Model.init();
	//Model関数のプロトタイプにあるready関数を呼び出します
	model.ready();
	
	//Viewの中のInit関数のインスタンスを生成
	var view = new View.init();
	//View関数のプロトタイプにあるdraw関数を呼び出します
	view.draw();
}

コメントを残す

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

コメントフィード

トラックバック URL : http://www.htmlcode.jp/html%e3%81%aecanvas%e3%81%ab%e9%bb%84%e9%87%91%e4%b8%89%e8%a7%92%e5%bd%a2%e3%81%ae%e8%9e%ba%e6%97%8b%e3%82%92%e6%8f%8f%e3%81%8f/trackback/