このページの本文へ

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

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

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

古籏一浩

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

最後の仕上げ+IE9対応のTips

 シンプルペイントはサンプル06で一応完成ですが、サンプル06はグローバル変数を多用しているため、他のスクリプトと組み合わせると不具合が出る場合があります。そこで、ブラシの色やサイズなどの情報はdrawDataオブジェクト内のプロパティとして保持するようにします。また、関数もなるべく無名関数に変更します(draw関数を変更)。

 実際に変更したものがサンプル07です。これでもまだ冗長な部分がありますので、もっと短くすることもできるでしょう。


サンプル07[JavaScript:draw.js]


window.addEventListener("load", function(){
    var drawData = {
        drawFlag : false,
        oldX : 0, // 直前のX座標を保存するためのもの
        oldY : 0, // 直前のY座標を保存するためのもの
        brushSize : 1,  // ブラシサイズ
        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 : "rgba(255,0,0,1)"
    }
    var can = document.getElementById("myCanvas");
    can.addEventListener("mousemove", function draw(e){
        if (!drawData.drawFlag) return;
        var x = e.clientX;
        var y = e.clientY;
        var can = document.getElementById("myCanvas");
        var context = can.getContext("2d");
        context.strokeStyle = drawData.penColor;
        context.lineWidth = drawData.brushSize;
        context.lineJoin= "round";  // 連結部分を丸にする
        context.lineCap = "round";
        context.beginPath();
        context.moveTo(drawData.oldX, drawData.oldY);
        context.lineTo(x, y);
        context.stroke();
        context.closePath();
        drawData.oldX = x;
        drawData.oldY = y;
    }
    , true);
    can.addEventListener("mousedown", function(e){
        drawData.drawFlag = true;
        drawData.oldX = e.clientX;
        drawData.oldY = e.clientY;
    }, true);
    window.addEventListener("mouseup", function(){  // キャンバスでなくウィンドウに
        drawData.drawFlag = false;
    }, true);
    // カラーパレット初期化
    $("#colorPalet div").click(function(e){
        drawData.penColor = drawData.colorList[this.id];
    });
    // ブラシサイズの設定を行うスライダー
    $("#slider").slider({
        min: 0,
        max: 100, // ブラシの最大サイズ
        value : 1,  // 最初のブラシサイズ
        slide : function(evt, ui){
            drawData.brushSize = ui.value;  // ブラシサイズを設定
        }
    });
}, true);
// 保存処理 (Canvas2Image)
// http://www.nihilogic.dk/labs/canvas2image/
function saveData(){
    var can = document.getElementById("myCanvas");
    Canvas2Image.saveAsPNG(can);    // PNG形式で保存
}


 最後におまけとして、シンプルペイントをInternet Explorer 9 Platform Preview(IE9プラットフォームプレビュー)で動作させる方法を紹介します。IE9ではHTML5がサポートされる予定ですが、プラットフォームプレビュー版にはCanvasが実装されていません。そこでCanvasのエミュレートライブラリーを使います。Canvasエミュレートでもっとも有名なのは「explorercanvas」です。以下のページからダウンロードできます。


 explorercanvasは、HTMLに以下の一行を追加するだけで利用できます。


<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->


7-1.png
IE9プラットフォームプレビューで動作させたもの。スライダーは動作しないが、Canavsに絵は描ける

 もう1つ、exCanvasよりも性能がいい「uuCanvas」というエミュレートライブラリーもあります。uuCanvasは以下のページからダウンロードできます。


 uuCanvasも、HTMLに以下の一行を追加するだけで利用できます。


<!--[if IE]><script type="text/javascript" src="js/uuCanvas.js"></script><![endif]-->


 どちらにしても、HTMLに1行追加するだけでシンプルペイントがIE9で動作します(スライダー部分をのぞく)。CanvasがIE9に実装されるかどうかはまだ分かりませんが、エミュレートライブラリーを使って一足早くHTML5のWebサイト/アプリケーション開発にチャレンジしてもよいでしょう。

 それでは、また次回。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

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

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

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