Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Canvas&Processing
~ ウェブの最新技術が魅せる「Firefoxの灯」(2)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2011/08/24 14:00

 Webアプリケーション「Firefoxの灯(ともしび)」に採用されているウェブの最新技術をテーマに、具体的なソースコードなどを交えて解説する本連載。第2回目の今回は、HTML5の「Canvas」要素と、JavaScriptライブラリの「Processing.js」を使った描画技術を取り上げます。

目次

はじめに

 ウェブの最新技術を駆使して実装された「Firefoxの灯(ともしび)」(以下、灯と表記)。前回は、灯の特徴をざっと説明しました。連載第2回目となる今回から、灯で実際に使用されている描画技術をテーマに取り上げ、技術的な側面を掘り下げていきます。

 本稿では、アプリ実装時、実際に採用された描画の最新技術であるHTML5の「Canvas」要素と、JavaScriptライブラリの「Processing.js」を、サンプルコードを交えて解説します。

※サンプルの表示について

 記事内で紹介されているサンプルはHTML5を使用して実装されているため、

 HTML5をサポートしていないブラウザでは、正常に表示されません。

 HTML5対応のブラウザ(Firefox、Chrome等)でご覧ください。

Canvasとは

 Canvasとは、JavaScriptを使って比較的自由度の高い描画を可能とするHTML要素の1つです。線や矩形、円などのプリミティブな形状をはじめ、自由曲線やイメージ、文字列なども描画できます。それぞれの色や透明度なども自由に設定できるので、必要とする表現にあわせて描画できます。

 また、最近のFirefoxでは、ハードウェアアクセラレーションによりパフォーマンスの向上を図っています。本章では、Canvasの使い方および描画方法を、実際のソースコードを用いながら解説していきます。

Canvasの準備

 まずは、以下のようにCanvasエレメントを含むHTMLを用意し、またJavaScriptが使えるように準備します。なお、灯ではJavaScriptライブラリのjQueryを利用しており、サンプルコードもjQueryを使っていきます。jQueryはJohn Resig氏によって開発され、DOMやCSSの操作、DOMレベルでの簡単なアニメーション効果などが簡単に実装できるJavaScriptライブラリとしてウェブデベロッパに人気があります。

HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <script src="jquery-1.5.min.js"></script>
    <script src="canvas_1.js"></script>
    <title>canvas_1</title>
</head>
<body>
    <canvas id="main_canvas"></canvas>
</body>
</html>
JavaScript: canvas_1.js
$(document).ready(function(){
    //ドキュメントの読み込み完了をうけ、このメソッドが呼ばれる
});
上記ソースコードを実装したサンプル

矩形を描こう

 次に、描画サイズを400px×400px、背景色をgrayに設定したCanvasを用意し、その中にCanvas上のサイズが100px×50pxの真っ赤な矩形を1つ描いてみます。

HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <script src="jquery-1.5.min.js"></script>
    <script src="canvas_2.js"></script>
    <title>canvas_2</title>
</head>
<body>
    <canvas id="main_canvas" width="400" height="400" style="background-color: gray"></canvas>
</body>
</html>
JavaScript: canvas_2.js
$(document).ready(function(){
    //main_canvas を取得
    var canvas = $("#main_canvas");
    //2Dの描画コンテキストを取得
    var context = canvas[0].getContext("2d");
    //塗りつぶしの色を赤にする
    context.fillStyle = "red";
    //x=150, y=250 の座標に 100x50 のサイズで矩形を描く
    context.fillRect(150, 250, 100, 50);
});
上記ソースコードを実装したサンプル

 HTMLではCanvas要素のwidth, height属性で描画サイズを、style属性をbackground-color:gray;とし、背景色をgrayにそれぞれ指定しています。JavaScriptは、documentの読み込み完了をうけて、main_canvasというidを持つCanvas要素を取得し、描画コンテキストを取得し赤い矩形を描いています(コード内コメント参照)。

 ここで1つ注意点があります。それは、Canvasにおけるwidth、height属性と、CSSで指定するwidth、heightは意味が違うということです。CSSで指定するサイズは、ブラウザ画面上でのサイズ指定になります。一方で、Canvasでのwidth、height指定は、ある意味Canvasの解像度という言葉に近い理解で良いかと思います。例えば、次のようなCanvas要素があった場合を考えてみましょう。

<canvas width="400" height="400" style="width: 300px; height: 300px; background-color: gray">

 この場合、先の例context.fillRect(150, 250, 100, 50);をして矩形を描画したとすると、その矩形の幅100は、300/400 * 100 = 75pxとなり、実際にブラウザで表示される値は75pxとなります。灯でも、Canvasサイズを固定サイズとして描画ロジックを組みたかったため、この2つを指定することで描画ロジック用サイズと配置用サイズとしてそれぞれ使い分けています


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 赤塚 大典(アカツカ ダイスケ)

    1976年東京生まれ。都立航空工業高等専門学校を卒業後、4輪レーサーを目指すも断念。蕎麦屋、溶接屋を経てプログラマになる。プログラマとしては、京阪奈地区の研究所に7年従事し、その間、2003年IPA未踏ユース、2006年IPA未踏ソフトウェア創造事業に採択される。 未踏において、Firefoxの拡...

  • Mozilla Japan(Mozilla Japan)

    一般社団法人 Mozilla Japan http://mozilla.jp/

バックナンバー

連載:ウェブの最新技術が魅せる「Firefoxの灯」
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5