古籏一浩の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
http://code.google.com/p/explorercanvas/downloads/list
explorercanvasは、HTMLに以下の一行を追加するだけで利用できます。
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
 |
|---|
| 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サイト／アプリケーション開発にチャレンジしてもよいでしょう。
それでは、また次回。
この連載の記事
- 第53回 Mac用ウィジェットをHTML/CSSで自作
- 第52回 Web技術で作るDashboardウィジェット開発入門
- 第51回 iOS 4.2×localStorageで作るGPSレコーダー
- 第50回 HTML5 SVGで作るシューティングゲーム
- 第49回 HTML5のInline SVGをJavaScriptで操作
- 第48回 HTML5で注目！インラインSVGの使い方
- 第47回 iOS 4.2の新機能で作るHTML5+JSアプリ
- 第46回 JavaScriptでEPUBビューアーを自作してみた
- 第45回 Audio Data APIでブラウザーをシーケンサーに！
- 第44回 Firefoxでソフトシンセも作れるAudio Data APIの使い方
- この連載の一覧へ
