このページの本文へ

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

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

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

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

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

HTML5 canvas
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に絵を描けます。

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

サンプル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形式で保存
}

書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。

HTML5+JavaScript アイデア&実践サンプル

本体 2,800+税、B5変形判312ページ(オール4色刷)
ISBN:978-4-04-870448-9

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング