※この記事は「古籏一浩の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形式で保存
}
「まとめてじっくり読みたい！」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。
HTML5+JavaScript アイデア&実践サンプル
本体 2,800＋税、B5変形判312ページ（オール4色刷）
ISBN：978-4-04-870448-9
