Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

HTML5 CanvasをjQueryライクに操作できるプラグイン「jCanvas」

「jQuery プラグイン」の利用(22)

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

 本連載では、JavaScriptライブラリとして利用頻度の高いjQueryとそのプラグインに着目して、その利用例を紹介します。今回取り上げるのは、HTML5の機能であるCanvasをより使いやすくするjQueryプラグイン「jCanvas」です。

目次

はじめに

 HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。

 Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。

  • 線(直線、曲線)
  • 図形(四角形、円)
  • 色とスタイル(単色、グラデーション、影)
  • 文字の描画(サイズ、フォント、色の指定)
  • 変形(拡大、回転、マトリクス変換)

 しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。

 今回紹介するjCanvasは、HTML5 Canvasの機能をjQueryにより使いやすくするプラグインです。jCanvasを利用することには以下のメリットがあります。

  • 慣れ親しんだjQueryの流儀でCanvasの描画を記述できる
  • 図形単位で処理の記述が分離されコードの見通しが良くなる
  • メソッドチェーンを使用することで複数図形の連続描画ができる
  • 複数のcanvas要素に対して同時に描画できる
  • レイヤー機能が標準で利用できる

対象読者

  • HTML5 Canvasに興味のある方
  • CanvasのJavaScript APIを直接操作することに抵抗を感じる方
  • jQueryの枠内で全てを処理したい方

必要な環境

 jCanvasが必要とするjQueryは1.4以降とアナウンスされています。今回は1.x系の最新版であるjQuery 1.11.1を使用します。また、サポートするブラウザは以下がアナウンスされています。

ブラウザ
  • Google Chrome 20以降
  • Mozilla Firefox 10.0以降
  • Apple Safari 5.0以降
  • Opera 10.1以降
  • Internet Explorer 9以降
プラットフォーム
  • Windows
  • Mac OS X
  • Ubuntu
  • iOS 5.0+
  • Android 3.0+

 今回は以下の環境で動作を確認しています。

  • Windows 7 64bit版
  • Internet Explorer 11

簡単な例でjCanvasの便利さを実感

 jCanvasは公式サイトにおいてMITライセンスで配布されています。公式サイトではライブラリファイルそのもののほか、APIドキュメント、Web画面上でjCanvasの動作を確認できるSandbox、様々な利用例を紹介するGallery、jCanvasの機能を拡張するPluginsなど、jCanvasに関する各種情報が提供されています。

図1 公式サイトで提供されているSandbox。コードを書き換えてその場で確認できる
図1 公式サイトで提供されているSandbox。コードを書き換えてその場で確認できる

 jCanvasをWebページで利用するためには、公式サイトからダウンロードしたjcanvas.js(通常版)またはjcanvas.min.js(縮小版)をscriptタグでHTMLファイルに設定します。

 最初に、jCanvasを使わない場合と使った場合のCanvas描画実装を比較します。シンプルな円と文字をCanvasに描画する処理をリスト1ではjCanvasを使わずに、リスト2ではjCanvasを使って記述しています。

 なお、キャプションに記載しているファイル名は、記事に添付しているサンプルで該当するファイルを示しています(以下同様)。

リスト1 シンプルなCanvas描画処理(jCanvas未使用時:001_jquery_nojcanvas.html)
// 描画するためのコンテキストを取得
var context = $("#canvas")[0].getContext("2d");

// 1. 赤い円を描画する
// 塗りつぶしの色(赤)
context.fillStyle="#ff0000";
// 枠線の色(黒)
context.strokeStyle="#000000";
// 枠線の太さ(2px)
context.lineWidth=2;
// 円を描画
context.arc(240, 120, 50, 0, 2 * Math.PI, true);
// 描画実行(塗りつぶし)
context.fill();
// 描画実行(枠線)
context.stroke();

// 2. 文字を描画
// 文字色(青)
context.fillStyle="#0000ff";
// フォントサイズ、フォントファミリー
context.font="24px Arial";
// 位置(上下・左右中央)
context.textAlign = "center";
context.textBaseline = "middle";
// 描画実行
context.fillText("Canvasによる描画", 240, 280);
リスト2 シンプルなCanvas描画処理(jCanvas使用時:002_jquery_jcanvas.html)
$("#canvas").drawArc({        // 1. 赤い円を描画する
    fillStyle: "#ff0000",     // 塗りつぶしの色(赤)
    strokeStyle: "#000000",   // 枠線の色(黒)
    strokeWidth: 2,           // 枠線の太さ(2px)
    x: 240,                   // x方向位置(240px)
    y: 120,                   // y方向位置(120px)
    radius: 50                // 半径(50px)
}).drawText({                 // 2. 青い文字を描画する
    fillStyle: "#0000ff",     // 文字色(青)
    fontSize: 24,             // フォントサイズ(24px)
    fontFamily: "Arial",      // フォントファミリー(Arial)
    x: 240,                   // x方向位置(240px)
    y: 280,                   // y方向位置(120px)
    text: "Canvasによる描画"  // 文字文言
});

 リスト1とリスト2は全く同じ描画を行います。

図2 リスト1、2の実行結果
図2 リスト1、2の実行結果

 jCanvasを使用しないリスト1ではCanvas要素から描画のためのコンテキストを取得し、それを用いて1つずつ順番に描画処理を記述するため、コード量が増えた時に記述内容から描画内容を把握しづらくなる場合があります。一方、jCanvasを使用するリスト2では、jQueryセレクタで選択したCanvas要素に対して描画処理を直接記述するため、複数の描画処理を直感的でわかりやすく記述できます。また、パラメータをJavaScriptオブジェクトでまとめて指定できたり、複数の描画処理を連続的に記述できる(メソッドチェーン)ことも、より見通しの良いコード記述に寄与しています。

 このようにjCanvasを利用することによってコード記述がシンプルになり、実装者がより描画処理の実装に集中できるようになります。


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

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2012年2月時点での登録メンバは37名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5