HTML5のCanvasで作る、Flash不要のお絵かきツール (2/5)

2010年04月15日　11時00分更新

文●古籏一浩

ツイートする

ペイント領域を設定する

　シンプルペイントの制作に取りかかりましょう。最初に、ペイント領域をcanvas要素として用意します。このcanvas要素には、スクリプトで操作しやすいように「myCanvas」というID名を付け、width属性とheight属性を指定します。ここでは横幅640ピクセル、縦幅480ピクセルにしました。


<canvas id="myCanvas" width="640" height="480"></canvas>

　このままだと、IE6～8などのCanvasに対応していないブラウザーでは何も表示されませんので、未対応ブラウザーの場合は次のようにメッセージを表示します。


<canvas id="myCanvas" width="640" height="480">
HTML5　Canvasに対応したブラウザーを使用してください。
</canvas>

Canvasに対応していないIE6などの古いブラウザーではメッセージが表示される

　これで、HTMLの準備ができました。次に、Canvas上でのマウスの動きに合わせてピクセルを描画するため、canvas要素に対してマウス移動イベントを設定します。canvas要素にはID名「myCanvas」を付けておきましたので、以下のようにgetElementById()を使って選択できます。このCanvasにmousemoveイベントを設定し、ピクセルを描画する関数（イベントハンドラ）を指定します。ここでは関数名を「draw」としています。


var can = document.getElementById("myCanvas");
can.addEventListener("mousemove", draw, true);

　関数drawには引数としてイベントオブジェクトが渡されます。このイベントオブジェクトからマウス位置を示すプロパティを読み出し、ピクセルを描画すればよいわけです。シンプルペイントでは、canvas要素の左上の座標はブラウザーの原点と同じです。マウスの位置はclientX, clientYに入っていますので、取り出した座標に点を表示するだけです。

　Canvasに点を表示するにはいくつか方法がありますが、とりあえず四角形を描いてみましょう。四角形を描くにはCanvasからコンテキストを取得し、Canvasの描画に関する情報を取得、設定します。

　まず、四角形の色を設定します。四角形の色はfillStyleに文字列で、"rgba(255,0,0,1)"のようにします。数値は赤の輝度、緑の輝度、青の輝度、不透明度です。輝度は0が最も暗く、255がもっとも明るくなります。不透明度は0.0～1.0までの小数値で、0が完全な透明、1が完全な不透明です。たとえば、"rgba(255,0,0,1)"は真っ赤な色を示します。

　色の設定ができたら、四角形を描画します。四角形はfillRectで描画でき、引数にX,Y座標と横幅・縦幅をピクセル単位で指定します。単純に点（1×1ピクセル）を描画するのであれば、fillRect(x,y,1,1)となります。

　ここまでのプログラムがサンプル01です。Canvas上でマウスを動かすと黒い背景の上に赤い点が表示されます。

サンプル01の実行画面。マウスの動きに合わせて赤い点が表示される

●サンプル01[HTML]


<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>シンプルペイント</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <script type="text/javascript" src="js/draw.js"></script>
    </head>
    <body>
    <canvas id="myCanvas" width="640" height="480">
        HTML5　Canvasに対応したブラウザーを使用してください。
    </canvas>
</body>
</html>

●サンプル01[JavaScript:draw.js]


window.addEventListener("load", function(){
    var can = document.getElementById("myCanvas");
    can.addEventListener("mousemove", draw, true);
}, true);
// 描画処理
function draw(e){
    var x = e.clientX;
    var y = e.clientY;
    var can = document.getElementById("myCanvas");
    var context = can.getContext("2d");
    context.fillStyle = "rgba(255,0,0,1)";
    context.fillRect(x,y,1,1);
}