HOPS Laboratoryもっと、創造的に。

ホップスの辻です。
今なにかと話題のHTML5。先日はcache manifest（キャッシュマニフェスト）のお話をしましたね。

• HTML5のcache manifest（キャッシュマニフェスト）を導入してみよう！

HTML5の中でも今もっとも注目度の高い機能に「canvas（キャンバス）」というものがある。このタグを使うと、javascriptと組み合わせて簡単に図形を書いたり、アニメーションをしたりできます。Flashではプラグインという形でFlash Playerを入れなければいけませんが、canvasはブラウザ側が既に実装しているので何も必要ありません。

今回は今もっとも熱いcanvas（キャンバス）タグを使って、醤油ラーメンを描きたいと思います。

canvas使ってモテたい！でもその前に・・・

ようしcanvas使っちゃぞ！その前にcanvasが動くブラウザの準備です。
2010年7月9日現在以下のブラウザでcanvasが使えます。

1. １）Firefox 3.6.6 [ダウンロード先]
2. ２）Safari 5.0 [ダウンロード先]
3. ３）Opera 10.60 [ダウンロード先]
4. ４）Google Chrome 5 [ダウンロード先]

IEが見当たりませんね。
実はIEはそのままではcanvasが動作しないんです。不便ですね。
そこで「ExplorerCanvas」や「uuCanvas.js」というjavascriptを読み込む事でようやく動きます。
必要に応じてダウンロードしましょう。

• ExplorerCanvas [ダウンロード先]
• uuCanvas.js [ダウンロード先]

canvasタグを定義しよう

canvasでラーメンを作ろう。
まずはベースとなる、canvasをhtml内に定義します。

<canvas id="ramen" width="560" height="450"></canvas>

これで準備はできました。
この段階で実際にhtmlをブラウザで見ても、横560px　縦450pxの真っ白な物しかありません。
では、実際に中身を描いていきましょう。

canvasでラーメンどんぶりを描こう！

まずラーメンを入れる器を描かないといけません。
そこで以下のように「ページを読み込んだら、ramenとmenを読み込むよ」っていうjavascriptを書きます。

onload = function() {
ramen(); //ラーメンどんぶりを読み込む
men(); //麺や具を読み込む
};

続けて実際にramenの中身を書きます。

//ラーメンどんぶりここから
function ramen() {
var canvas = document.getElementById('ramen');
if ( ! canvas || ! canvas.getContext ) {return false;}
var rmn = canvas.getContext('2d');
rmn.save();

//どんぶりの土台（陰付き）
rmn.scale(1, 0.60);
rmn.beginPath();
rmn.shadowOffsetX = -15;
rmn.shadowOffsetY = 30;
rmn.shadowColor = 'rgb(230, 230, 230)';
rmn.shadowBlur = 70;
rmn.fillStyle = 'rgb(210, 210, 210)';
rmn.arc(270, 560, 120, 0, Math.PI*2, false);
rmn.fill();
rmn.closePath();

rmn.restore();
rmn.save();

//どんぶりの外側（赤い部分ね）
rmn.beginPath();
rmn.fillStyle = 'rgb(167, 78, 70)';
rmn.moveTo(75,270);
rmn.quadraticCurveTo(270,490,470,270);
rmn.fill();

rmn.restore();
rmn.save();

//どんぶりの中身（具とか入る所ね）
rmn.beginPath();
rmn.scale(1, 0.60);
rmn.fillStyle = 'rgb(230, 230, 230)';
rmn.arc(270, 320, 240, 0, Math.PI*2, false);
rmn.fill();
rmn.closePath();

rmn.restore();
rmn.save();

//醤油スープ（下の層）
rmn.beginPath();
rmn.scale(1, 0.55);
rmn.fillStyle = 'rgb(143, 37, 26)';
rmn.globalAlpha = 0.6;
rmn.arc(270,375, 200, 0, Math.PI*2, false);
rmn.fill();
rmn.closePath();

rmn.restore();
rmn.save();

//醤油スープ（上の層）
rmn.beginPath();
rmn.scale(1, 0.55);
rmn.fillStyle = 'rgb(191, 91, 11)';
rmn.globalAlpha = 0.2;
rmn.arc(270,380, 210, 0, Math.PI*2, false);
rmn.fill();
rmn.closePath();

rmn.restore();
}

さあ、これでラーメンどんぶりが完成しました。
続いて中身です。

canvasのdrawImage()メソッドを使って麺と具の画像を描画しよう！

canvasはラーメンどんぶりの様に単純な図形を描けるだけではありません。
jpgやpngなどの画像を読み込んでcanvasに描画できるのです。
実際にやってみましょう。

//麺と具ここから
function men() {
var canvas = document.getElementById('ramen');
if ( ! canvas || ! canvas.getContext ) {return false;}
var m = canvas.getContext('2d');

//麺（ハイパー手抜きタイム）
var men2 = new Image();
men2.onload = function() {
m.drawImage(men2, 65, 90);
}
men2.src = "men.png"; //麺と具を読み込みます！
}

できました。
これで醤油ラーメンの完成ですね。

醤油ラーメンのデモ

• 醤油ラーメンのデモはこちら

jsdo.itに乗せてみました

• HTML5のcanvasで醤油ラーメン描いてみた

canvasの解説

canvasで楕円を描く方法

ちょっと苦労したのがcanvasで楕円を描く方法。
どうやればいいのだろう？と思ったらできましたね、コレです。

rmn.scale(1, 0.60); //横の比率1,縦の比率0.6
rmn.arc(270, 320, 240, 0, Math.PI*2, false); //円を描きます。

ポイントはscale（スケール）です。scaleを設定することで、横と縦の比率を指定できます。今回は上から押されて潰れているような楕円にしたかったので横は1、縦は0.6と指定しました。
※MAXは1です。

canvasでベジェ曲線を描く方法

ラーメンどんぶりの赤い部分、実は無駄にベジェ曲線をつかって描画しています。こうすることで、よりリアルな形にしあがりました。

rmn.moveTo(75,270); //左上からの座標を指定（左から75px、上から270pxに移動）
rmn.quadraticCurveTo(270,490,470,270); //これベジェ曲線です

ベジェ曲線は、単純な四角形や円よりも難しいですが慣れると簡単に扱う事ができます。もしかするとillustratorなどを扱っている人なら慣れるのが簡単かもしれませんね。
ボクは慣れませんでした。

canvasで透明なスープを描く方法

今回は醤油ラーメンなので、赤茶っぽい色の透明なスープを表現しました。
実際には透明度を設定しただけなので楽チンでした。

rmn.fillStyle = 'rgb(143, 37, 26)'; //色は赤茶
rmn.globalAlpha = 0.6; //透明度は0.6（MAXは1）

サンプルのダウンロード

今回は醤油味のラーメンでしたが、みなさんもサンプルをダウンロードして色んなラーメンを楽しんでくださいね！

• hops-html5-canvas-ramen.zip

ホップスでは「HTML5のcanvasを使って醤油ラーメンを描いてみた！！」が得意です！ぜひお気軽にお問い合わせください！