古籏一浩のJavaScriptラボ ― 第32回

HTML5とjQueryでブラウザーがペイントツールに！

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

文● 古籏一浩

※この記事は「古籏一浩のJavaScriptラボ」の第32回です。過去の記事も合わせてご覧ください。


HTML5 Canvasで作った「シンプルペイント」。色とサイズが選べ、保存もできる。画像クリックでサンプルページを表示します（Firefox 3／Opera 10／Safari 4で表示可能）

　HTML5 CanvasとJavaScriptを使って、Webブラウザー上で動くお絵かきツール「シンプルペイント」を制作する企画。前回の記事では、コアとなる描画機能を作成し、PNGファイルへ保存する方法を解説しました。今回は、このシンプルペイントをベースに、ブラシの色やサイズ（太さ）を変更できるように拡張しましょう。

ブラシの色選択機能を付けるには

　前回作成したシンプルペイントは単色（赤色）の描画しかできませんでした。このままだとお絵かきツールとしては不十分なので、ブラシの描画色を選択できるようにしましょう。今回は8色（黒、青、赤、紫、緑、水色、黄、白）のカラーパレットを用意し、マウスで選択した色で描画できることにします。

　カラーパレットはHTMLのdiv要素で用意し、それぞれに「black」「blue」などのカラー名を表すID名を指定します。JavaScriptでは、カラーパレットのID名とカラー名を対応させたオブジェクトを以下のように作成します。


var colorList = {
    "black"   : "rgba(0,0,0,1)",
    "blue"    : "rgba(0,0,255,1)",
    "red"     : "rgba(255,0,0,1)",
    "magenta" : "rgba(255,0,255,1)",
    "green"   : "rgba(0,255,0,1)",
    "cyan"    : "rgba(0,255,255,1)",
    "yellow"  : "rgba(255,255,0,1)",
    "white"   : "rgba(255,255,255,1)"
}

　描画色を格納する「penColor」という変数を用意し、デフォルトカラーの情報を入れておきます。ここでは赤色にしましたが、好みの色の値で構いません。


var penColor = "rgba(255,0,0,1)";

　次に、カラーパレットがクリックされた時の処理を作ります。処理の記述を簡単にするため、ここからは「jQuery」を利用します。jQueryについては本連載でも何度か紹介していますので、ここでは説明を省きます（編集部注＝jQueryの基本について学習したい方は「jQuery UIデザイン入門」を参照してください）。

　カラーパレットがクリックされると、クリックされたdiv要素（パレット）のID名をcolorListの添字に指定して、penColorに代入します。これで、colorListで定義したカラー情報の文字列をブラシの描画色として設定できます。実際のコードはわずか3行です。


    $("#colorPalet div").click(function(e){
        penColor = colorList[this.id];
    });

　ここまでの処理をまとめたのがサンプル05です。好みの色をカラーパレット上で選択すると、選択した色でCanvasに絵を描けます。


カラーパレット上で選択した色で描ける

●サンプル05[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/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="js/base64.js"></script>
        <script type="text/javascript" src="js/canvas2image.js"></script>
        <script type="text/javascript" src="js/draw.js"></script>
    </head>
    <body>
    <canvas id="myCanvas" width="640" height="480">
        HTML5　Canvasに対応したブラウザーを使用してください。
    </canvas>
    <div id="menu">
        <button onclick="saveData()">保存</button>
    </div>
    <div id="colorPalet">
        <div id="black"></div>
        <div id="blue"></div>
        <div id="red"></div>
        <div id="magenta"></div>
        <div id="green"></div>
        <div id="cyan"></div>
        <div id="yellow"></div>
        <div id="white"></div>
    </div>
</body>
</html>

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


var drawFlag = false;
var oldX = 0;
var oldY = 0;
var colorList = {
    "black"   : "rgba(0,0,0,1)",
    "blue"    : "rgba(0,0,255,1)",
    "red"     : "rgba(255,0,0,1)",
    "magenta" : "rgba(255,0,255,1)",
    "green"   : "rgba(0,255,0,1)",
    "cyan"    : "rgba(0,255,255,1)",
    "yellow"  : "rgba(255,255,0,1)",
    "white"   : "rgba(255,255,255,1)"
}
var penColor = "rgba(255,0,0,1)";
window.addEventListener("load", function(){
    var can = document.getElementById("myCanvas");
    can.addEventListener("mousemove", draw, true);
    can.addEventListener("mousedown", function(e){
        drawFlag = true;
        oldX = e.clientX;
        oldY = e.clientY;
    }, true);
    can.addEventListener("mouseup", function(){
        drawFlag = false;
    }, true);
    // カラーパレット初期化
    $("#colorPalet div").click(function(e){
        penColor = colorList[this.id];
    });
}, true);
// 描画処理
function draw(e){
    if (!drawFlag) return;
    var x = e.clientX;
    var y = e.clientY;
    var can = document.getElementById("myCanvas");
    var context = can.getContext("2d");
    context.strokeStyle = penColor;
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
    oldX = x;
    oldY = y;
}
// 保存処理　(Canvas2Image)
//　http://www.nihilogic.dk/labs/canvas2image/
function saveData(){
    var can = document.getElementById("myCanvas");
    Canvas2Image.saveAsPNG(can);    // PNG形式で保存
}