HTML5入門－canvasで四角を描く－

110329_i

ようやくcanvasを使ってみました。
基本中の基本、canvas領域に四角形を表示させてみます。

図形を描く領域を用意する

まずは図形を描く領域を作ります。
やり方はとても簡単です。
html5のソース内の領域を表示させたいところに以下を追加します。

<canvas id="canvas" width="200" height="200"></canvas>

id、width、heightは任意です。
分かりやすくするためにスタイルシートで背景画像を指定して枠線をつけました。

サンプルを見る
canvasで四角を描く

図形を描画するための準備

図形を描くにはJavascriptを使います。
以下ソースを書きます。 

onload = function(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
};

コンテキストの説明ができないのですが、
2D図形を描画するために必要な情報を得るといった感じだと思います。
これをページ読み込み時に実行しておきます。
では、図形を描いていきます。

塗りつぶしの四角を描く

塗りつぶした四角を描画します。
色の指定と、描く場所、大きさを指定します。 

ctx.fillStyle="rgb(255,0,0)";
ctx.fillRect(10,10,180,180);

1行目が色指定です。左から赤、緑、青です。
デフォルトでは0,0,0で、黒色の図形が表示されます。

2行目で図形の位置と大きさを指定して実際に図形を描画します。
(左上からの横方向への距離、左上から縦方向への距離、横幅、縦幅)
となっています。
サンプルページで[四角]ボタンを押して描画してみてください。
実際のソースがcanvasの下に表示されます。

サンプルを見る
canvasで四角を描く

白抜き四角を描く

白抜きで枠線の色を指定できる四角を描きます。 

ctx.strokeStyle="rgb(255,0,0)";
ctx.strokeRect(10,10,180,180);

fillがstrokeに変わっただけです。
色の指定、位置、大きさ等の指定の仕方もfillStyle、fillRectと同じです。
サンプルページで[枠線四角]を押して描画してみてください。

サンプルを見る
canvasで四角を描く

四角で切り抜き

指定した位置、大きさで描画されている図形を切り抜きます。 

ctx.clearRect(50,50,100,100);

サンプルページで[四角]を押したあと、[切り抜き]を押してみてください。
描画されていた領域が切り抜かれて背景が見えます。

サンプルを見る
canvasで四角を描く

canvas内の描画を全てリセットしたい場合は数値を
(0,0,canvasのwidth,canvasのheight)
とします。

描画図形の透明度を指定する

fillStyleやstrokeStyleで色を指定した部分を以下のようにすることで、
描画する図形の透明度を変更することができます。 

ctx.fillStyle="rgba(255,0,0,0.5)";

rはred(赤)、gはgreen(緑)、bはblue(青)、aはalpha(アルファ値：透明度)です。
alpha部分を1(不透明)～0(透明)の間で指定するこで、描画する画像の透明度を変更できます。

サンプルを見る
canvasで四角を描く

今日のまとめ

動かしたりできるようになってからcanvasの素晴らしさに気づける気がします…
Flashの代わりになる技術ということでしばらく勉強してみたいと思います。

参考にしたサイト