PR

JavaScriptを使って描画するCanvasとは?

2008年5月1日(木)
羽田野 太巳

Webブラウザの互換性

それぞれのWebブラウザで、Canvasの実装範囲が多少異なっています。すべてのCanvasの機能がすべてのWebブラウザで同じように使えるわけではありませんが、基本的な機能については、どのWebブラウザでも利用することが可能です。

Webブラウザごとの対応状況については、「HTML5.JP - Canvasリファレンス」を参考にしてください。

ではInternet ExplorerでもCanvasが利用できるようにするため、まずExplorerCanvasをダウンロードしましょう。ExplorerCanvasは、Internet ExplorerでCanvasをエミュレートするJavaScriptライブラリです。

2008/04/16現在、ExplorerCanvasの最新版は0002です。excanvas_0002.zipをダウンロードし解凍すると、excanvas.jsというファイルがあります。実際に使うのは、このファイルのみです。このファイルを、Canvasを使うHTMLファイルと同じ場所に設置しておいてください。そして、HTMLではexcanvas.jsをロードするようscript要素を記述しておきます。

HTMLの準備

実際にCanvasを描くためのHTMLを準備しましょう(リスト1)。


画像をクリックすると拡大します

excanvas.jsをロードするscript要素を「」で囲んでいますが、Internet Explorer以外のWebブラウザではこのscript要素をコメントとしてみなすため、Internet Explorerだけが認識できるようにするハックです。

draw1.jsというJavaScriptファイルをscript要素でロードしていますが、本連載では、このファイル(ファイル名はサンプルごとに異なります)に、Canvasを使った描画処理を記述します。

次に、図を描きたい場所にcanvas要素を記述します。canvas要素はHTML 5で新たに規定された要素です。この要素で使える属性は、ボックス領域の幅と高さを表すwidth属性とheight属性のみです。必須の属性ではありませんが、指定しないと各Webブラウザが持っているデフォルト値が適用されます。Firefoxの場合は、300 x 150です。

細かい話は後にして、ここではまず 実際にCanvasを使って簡単な図を描いてみましょう。コードの詳細については後ほど詳しく説明しますので、ここではCanvasの使い方のイメージだけを把握してください。

図2はCanvasを使って矩形(四角形)を描いたものです。draw1.jsはリスト1のようになります。このサンプルでは矩形を線だけで描き、さらにその中に塗りつぶした矩形を描いています。

有限会社futomi
代表取締役。CGI/Perl総合サイト「futomi\'s CGI Cafe」を運営。ホスティングサーバ(共用サーバ)でも利用できるウェブアプリケーションの独自開発・販売を手掛ける。主にPerlによるCGI制作が中心。オーダーメードのウェブアプリケーション制作/ウェブサーバ管理業務も手掛ける。http://www.futomi.com/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています