HTMLのCanvasにひとつの点を描く

HTML5のCanvasに点を描く

こんにちは。HTML5 エバンジェリストの小川 洋です。

今回は、HTMLのCanvasタグに、JavaScriptを使って、ひとつの点を描きます。

HTMLのCanvasにひとつの点を描く : デモ

HTMLのCanvasにひとつの点を描く : ZIPファイル(4kb)

そのためには、HTMLとCSS、そしてJavaScriptが必要です。

1.HTML

<!DOCTYPE html>
このタグで、標準モードでWebページをレンダリングすることをブラウザに伝えます。

<html lang=”ja”>
言語指定付きの<html>タグです。”ja”は日本語を意味します。ちなみに、英語の場合は、”en”になります。

<head>…</head>
HTMLページの生成に必要な情報を記述します。ここでは、<meta>や<title>情報が入っています。

<meta charset=”utf-8″ />
このタグは、Webページ上の文字エンコーディングをブラウザに伝えます。通常は替える必要はありません。

<title>…</title>
ブラウザの上部ウィンドウのバーに表示されるタイトルです。

<body>…</body>
HTMLページのメインコンテンツを示す要素です。この要素がブラウザに表示されます。

cssファイル
CSSファイルは、ここでは、以下のように、HTMLの<head>内へ外部から読み込みます。

<link href=”css/base.css” rel=”stylesheet” type=”text/css”>

JavaScriptファイル
同じく、JavaScriptファイルも、HTMLの<head>内に以下のJavaScriptファイルを外部指定したscriptタグを用意します。

<script src=”js/base.js”></script>

<canvas></canvas>
bodyの中にcanvas要素(タグ)を追加し、idに名前とwidthに幅のピクセル値、そしてheightに高さのピクセル値を指定します。

<!doctype html>
<html lang="ja"> 
	<head>
		<meta charset="UTF-8">
		<title>HTML5のCanvasにひとつの点を描く</title>
        <link href="css/base.css" rel="stylesheet" type="text/css">
		<script src="js/base.js"></script>
	</head>

    <body>
        <canvas id = "viewArea" width = "275" height = "275"></canvas>
    </body>
</html>

2.CSS

CSSをHTMLに以下のように指定します。CSSはWebページにデザインを実装する技術です。外部に定義したCSSファイルのbase.cssをHTMLに読み込むコードです。

<link rel=”stylesheet” href=”css/base.css” type=”text/css”>

@charset “UTF-8”
HTMLのエンコードに合わせて、スタイルシートのエンコードを Unicode UTF-8 にします。両者のエンコードを同じにすることで、文字化けを防ぎ、自分の意図したデザインをHTMLに反映することができます。

margin
テキストや画像などの要素(タグ)に対して、その周囲に発生する、ボーダーより外側の余白を指定します。下の説明画像を参照すると、分かりやすいと思います。

padding
上のmarginの働きに似ていますが、テキストや画像などの要素(タグ)に対して、その周囲に発生する、ボーダーより内側の余白を指定します。下の説明画像を参照してください。

margin and padding

background-color
背景色を指定します。

-webkit-transform
GPU(Graphics Processing Unit)を起動し、描画処理を高速化します。

position
要素(タグ)の配置を指定します。

top
ブラウザページの左上を起点として、要素(タグ)のトップからのピクセル位置を指定します。

left
ブラウザページの左上を起点として、要素(タグ)の左からのピクセル位置を指定します。

width
要素(タグ)の幅をピクセル値で指定します。

height
要素(タグ)の高さをピクセル値で指定します。

border
要素(タグ)の周囲に線を描きます。

@charset "UTF-8"; /*スタイルシートのエンコードを Unicode UTF-8 にします*/

body
{
	margin:0 /*要素(タグ)の周囲にできるボーダーより外側の余白*/
	padding:0; /*要素(タグ)の周囲にできるボーダーより内側の余白*/
	background-color: #fff; /*背景色を白に指定します*/
	-webkit-transform:translateZ(0px); /*ブラウザが対応していれば、GPU(Graphics Processing Unit)を起動し、描画処理を高速化します*/
}
 
#viewArea
{
	position: absolute; /*要素(タグ)の配置を絶対配置にします*/
	top: 10px; /*ブラウザページの左上を起点としたトップからのピクセル位置に、要素(タグ)を配置します*/
	left: 10px; /*ブラウザページの左上を起点とした左からのピクセル位置に、要素(タグ)を配置します*/
	width: 275px; /*要素(タグ)の幅をピクセル値で指定します*/
	height: 275px; /*要素(タグ)の高さをピクセル値で指定します*/
	border: 1px solid #000; /*要素(タグ)の周囲を線(幅:1ピクセル、種類:実線、カラー:黒色)で囲みます*/
}

3.JavaScript

HTML上のオブジェクトは、DOM(Document Object Model)として表現されます。windowオブジェクトは、そのDOMの最上位に位置します。HTMLを実行するにあたっては、まずこのオブジェクトを経由することで、すべての必要なコードとリソースがロードされます。

DOMには、HTML要素がすべて含まれます。JavaScriptは、このdocumentオブジェクトを通して、canvas要素を制御し、図形などを描画します。

Canvas領域に何かを描くためには、事前に、HTMLページの要素情報をすべてロードしておく必要があります。そのためには、まず、JavaScriptで、windowオブジェクトのloadイベントを書きます。このイベントは、HTMLページのロードが終わった時点で発生します。

下記のJavaScriptコードは、HTMLページのすべての要素をロードしたら、init()関数を実行するというプログラムです。

window.addEventListener(“load”, init, false);

function init()
{
     //ここにJavaScriptのコードを書く
}

第一引数: イベントです。ここではloadイベントが使われています。文字通り、ロードするというイベントです。指定できるイベントは、あらかじめJavaScriptで、いくつか定義されています。

第二引数: イベントが発生すると、呼び出されるイベントハンドラ関数です。ここでは、init()関数を定義していますが、関数名とその内容は、それぞれの開発に応じて、任意のものになります。

第三引数: useCapture。 変数値は、true, またはfalseになります。DOMツリー内のイベントハンドラの伝搬を定義します。しかし、どういう意図で行なうものなのか、なぜ伝搬が必要なのか、useCaptureの仕様がいまひとつハッキリしないので、デフォルトのfalseのままにしておきます。

また、JavaScriptによるプログラムを組み立てるにあたって、MVCデザインパターンを用意して、コードの構造化を行なってメンテナンスしやすくしています。

ひとつの点は、Canvasの線を描く関数を使って、線の太さ分だけ、横に伸ばすことで作成します。

window.addEventListener("load", init, false); //HTMLページのロードが終わった時点で、init()関数を実行する

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()
	{
		//グラフィックの描画関数
		ctx.strokeStyle = "#000000"; //線のカラー設定
		ctx.lineWidth = 10; //線の太さ
		ctx.beginPath(); //パスの描画を始める
		ctx.moveTo(centerX, centerY); //線の開始位置 (xの座標値 , yの座標値)
		ctx.lineTo(centerX + 10, centerY); //線の終了位置 (xの座標値, yの座標値)
		ctx.stroke(); //線の終了
	}
	
	//ロジックの処理を行うオブジェクトのグループ
	Model = 
	{
		//空のinit関数を定義
		init: function()
		{

		}
	}
			
	//Modelの中の関数(init)にプロトタイプの変数や関数を定義します
	//プロトタイプには、インスタンスで使う共有の関数や変数を設定します
	Model.init.prototype.ready = function()
	{
		//Canvasのエレメント要素を変数に代入する
		theCanvas = document.getElementById("viewArea");
		
		//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 - 5;
		
		//Canvasタグで2次元描画を行ないます
		ctx = theCanvas.getContext("2d");
	}
	
	//Modelの中のinit関数のインスタンスを生成
	var model = new Model.init();
	//Model関数のプロトタイプにあるready関数を呼び出します
	model.ready();
	
	//Viewの中のinit関数のインスタンスを生成
	var view = new View.init();
	//View関数のプロトタイプにあるdraw関数を呼び出します
	view.draw();
}

コメントを残す

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