【特集】

詳解! HTML 5と関連APIの最新動向 - 新タグ&API編

4 Canvasタグ

白石俊平  [2009/07/31]

4/7

canvasタグは、Webページ内に埋め込むことのできるグラフィック要素で、JavaScriptを用いて自由に図形や画像の描画を行える。

Internet Explorer以外のブラウザではすでにサポートされている。また、explorercanvasというライブラリを使用すれば、Internet Explorerでもcanvasをエミュレートすることができる。

canvasを使用するには、まず幅(width属性)と高さ(height属性)を指定してcanvasタグを指定する必要がある。またcanvasタグ内には、canvasをサポートしていないブラウザで閲覧された際に表示する代替コンテンツを記述することができる。

<canvas id="canvas1" width="300" height="300">
  このページを正しく表示するにはcanvas要素をサポートしたブラウザが必要です。
</canvas>

上のコードだけでは、キャンバスを配置しただけで何も表示されない。キャンバスにグラフィックを描画するには、canvasのDOMオブジェクトが持つgetContext()メソッドを呼び出し、描画コンテキストを取得する必要がある。

// 描画コンテキストの取得
var ctx = document.getElementById("canvas1").getContext("2d");

描画コンテキストは、矩形や円、線、テキスト、画像などを描画するメソッドを持つほか、回転や変形などの変換操作を行うこともできる。

以下の例は、画像描画(drawImageメソッド)と座標変換(transformメソッド)を用いて、画像の鏡像を作成する例だ。drawImageを用いて画像を描画するためには、対象画像のロードが完了している必要があるため、Imageオブジェクトのonloadイベントを捕捉して処理を行っている。

リスト canvas.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function init() {
    // img要素を作成
    var image = document.createElement("img");
    // 画像の読み込みが完了したら
    image.onload = function() {
        var canvas = document.getElementById("canvas1");
        // 描画コンテキストを取得
        var ctx = canvas.getContext("2d");
        // 画像を描画
        ctx.drawImage(image, 0, 0);
        // 画像を半透明にし、画像を反転させて描画
        ctx.globalAlpha = .1;
        ctx.transform(1, 0, 0, -1, 0, image.height * 2);
        ctx.drawImage(image, 0, 0);
    };
    // 画像のURLをセットし、読み込み開始
    image.src = "http://journal.mycom.co.jp/images/ci_mycomjournal.gif";
}
</script>
</head>
<body onload="init()">
<canvas id="canvas1" width="300" height="500">
</canvas>
</body>
</html>

実行結果

canvasについては多くのブラウザが実装済みなこともあり、良質なチュートリアルが数多く存在する。Mozillaのチュートリアルや、HTML5.jpのチュートリアルがお薦めだ。

4/7

インデックス

目次
(1) はじめに - 本特集の趣旨
(2) HTML 5マークアップについての簡易リファレンス
(3) Video/Audio要素とそのAPI
(4) Canvasタグ
(5) 大幅に強化されたフォーム要素
(6) アウトラインを意識したマークアップ
(7) ドラッグ&ドロップAPI

もっと見る

関連キーワード


IT製品 "比較/検討" 情報

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

特別企画 PR

人気記事

一覧

イチオシ記事

新着記事

水樹奈々、7/13発売の34thシングルより収録曲情報を公開
[01:51 5/30] ホビー
林家たい平、24時間マラソンランナーに! 闘病中の師匠・こん平にパワーを
[23:27 5/29] エンタメ
Gカップ染谷有香、初体験の氷プレイに「恥ずかしさよりも凍えそうで…」
[23:00 5/29] エンタメ
Gカップ森咲智美、OS☆U卒業後の初DVDで「横乳がはみ出してしまって」
[23:00 5/29] エンタメ
[林家たい平]人生最高体重でひざに不安も 「24時間」マラソン「何とか完走を」
[22:26 5/29] エンタメ

特別企画 PR

求人情報