グリッド|HTML5

グリッド|HTML5

グリッド|HTML5(HTML5, JavaScript, CSS3) : デモ

グリッド|HTML5(HTML5, JavaScript, CSS3) : ZIPファイル(4kb)

1.HTML

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

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

2.CSS

@charset "UTF-8"; /* 文字のエンコードをHTMLページと合わせます */

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

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

3.JavaScript

base.js

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

function init()
{
	var theCanvas = document.getElementById("canvas");
	var context = theCanvas.getContext("2d");
	
	function drawGrid(color, stepx, stepy){
		context.save()
		context.strokeStyle = color;
		context.fillStyle = '#ffffff';
		context.lineWidth = 0.5;
		context.fillRect(0, 0, context.canvas.width, context.canvas.height);

		for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
		 context.beginPath();
		 context.moveTo(i, 0);
		 context.lineTo(i, context.canvas.height);
		 context.stroke();
		}

		for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
		 context.beginPath();
		 context.moveTo(0, i);
		 context.lineTo(context.canvas.width, i);
		 context.stroke();
		}

		context.restore();
	}

	// 初期化.........................................

	drawGrid('lightgray',10,10);

}

コメントを残す

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