イントロダクション
canvas タグを使用すると、ブラウザ上で多様なグラフィクスを表現することができます。canvas タグ導入以前には手軽には実現できなかったグラフィクス表現も、canvas を使用することで手軽にブラウザ上に表現することができます。
canvas 上に多様なグラフィクスを表現するために使用するのは JavaScript です。
つまり、JavaScript のコード次第で静的な絵から動的な絵、そしてインタラクティブなコンテンツまで様々な用途に活用できます。
現段階において、主要なブラウザの最新版では canvas へ対応しており、いよいよ canvas を気兼ねなく使える canvas 全盛時代に入ろうとしているのではないでしょうか？(*1)
（もしかしたら、もう canvas 全盛時代に入っているのかもしれません？）
*1
canvas要素 - Wikipedia
http://ja.wikipedia.org/wiki/Canvas%E8%A6%81%E7%B4%A0
とりあえず canvas へ入門してみた
以下のサイトを参考にさせていただき、簡単な矢印を描画するコードを書いてみました。Canvasの使い方 - Canvas - HTML5.JP
http://www.html5.jp/canvas/how.html
簡単な矢印を描画するコード
<canvas height="20" id="canvas-main" width="100">
お使いのブラウザは canvas に対応していないようです。<br />
このページは canvas に対応したブラウザでご覧ください。<br />
</canvas>
<script type="text/javascript">
<!--
// --- 共通部 ---
// 特定の canvas を管理するためのオブジェクト
function CanvasObject(id) {
this.id = id; // canvas の id
this.canvas = document.getElementById(this.id); // canvas の要素
// canvas に対応しているかどうかをチェック
this.getEnable = function() {
/* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */
if (!this.canvas || !this.canvas.getContext) {
return false;
}
return true;
}
this.enable = this.getEnable(); // canvas に対応しているかどうか
if (this.enable) {
this.ctx = this.canvas.getContext('2d'); // 2Dコンテキスト取得
}
// 描画処理
this.draw = function(drawMain) {
// canvas が有効であれば描画処理を続行
if (!this.enable) return false;
drawMain(this.ctx);
return true;
}
}
// --- 個別処理部 ---
setTimeout((function() {
var canvasObject = new CanvasObject('canvas-main');
canvasObject.draw(function(ctx) {
ctx.beginPath();
ctx.strokeStyle = 'rgb(0, 0, 0)';
// 矢印の先頭を描画
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(10, 20);
// 矢印のラインを描画
ctx.moveTo(0, 10);
ctx.lineTo(100, 10);
ctx.stroke();
});
}), 1000);
//-->
</script>
上記コードは <body> 内に埋め込んでそのまま使えるように、canvas タグのすぐ下に描画用の JavaScript コードを記載してあります。
また、canvas を使用したコードの場合、描画する内容・ページにかかわらず共通的に使える部分と、個別の描画コードがあるため、それらを分離して使いやすくしてみました。
（この構造はまだ canvas の全体像が見えてない段階で作り上げたので、今後やりたい処理によってはこの構造を変化させるかもしれません。）
個別処理部の中で描画対象の canvas を取得して、線を使って矢印を描画しています。
※ 個別処理部を setTimeout で 1 秒後に実行しているのは、この処理を追加しなかった場合、私の Blogger 上では描画が反映されず、真っ白になってしまったためです。(テスト環境：Chrome バージョン 34.0.1847.137 m）
ローカルの html ファイルで試した時には、上記のような setTimeout で 1 秒後に実行するような処理を入れなくても、正常に描画が行われていました。
また、私の Blogger 上で setTimeout に 0 秒後を指定した場合も、描画結果が反映されず真っ白になってしまいました。
以上のことから、setTimeout で 1 秒後に実行すれば確実に描画されるかどうかは不明です。この点は追って調査したいと思います。
（私の Blogger の場合、様々なコードが動作しているので、何が原因なのか特定するのに時間がかかってしまいます。）
→ 私の Blogger の投稿ではなく、ページの方で canvas の描画を試してみたところ、setTimeout を使用しなくても正常に描画できました。私の Blogger の場合、投稿とページで動作するコードやページ表示の負荷が異なるので、それらの何らかの要因によって正常に表示できる・正常に表示できないといった違いが発生した可能性があります。
とりあえず、Blogger のユーザであっても、通常は setTimeout で 1 秒後に実行するような小細工を入れる必要は無いはずです。
上記の現象が無い場合に、setTimeout で描画を遅らせるメリットとしては、ページを開いたときにすぐに描画が実行されないため、canvas 以外の要素がすぐに表示されるという点でしょうか。ページの後半の要素やあまりにも描画重たい場合には、setTimeout で描画を遅らせるという手段も検討する価値はあるかもしれません。
結果
以下のように、左向きの矢印が canvas へ描画されます。
まとめ
canvas への基本的な描画は、JavaScript の基本的な知識があればすぐに理解できる内容でした。インターネット上で canvas を利用したサイトを探してみると、驚くような視覚効果を実現しているものが多数あり、canvas の奥深さにただただ心を奪われるばかりです。(*2)
*2
まるで自分の意思があるかのよう！canvasサイトまとめ12選 | 株式会社LIG
http://liginc.co.jp/web/html-css/html/63355
今後も canvas への理解を深めていき、面白いコンテンツを作り出せるようになっていきたいと思いました。
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について