【特集】

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

4 Canvasタグ

 

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年後は? あなたの年収をデータに基づき予報します。

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

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

人気記事

一覧

イチオシ記事

新着記事

【レビュー】Windows 10 Insider Previewを試す(第57回) - 今月6回目のビルドアップ! ビルド14376登場
[14:27 6/29] パソコン
終電を逃したとき、いくらまでならタクシーに乗りますか?
[14:14 6/29] マネー
"日本一かわいいコスプレイヤー"御伽ねこむ、漫画家・藤島康介と31歳差婚、妊娠も発表
[13:52 6/29] ホビー
表裏両面の変換効率がほぼ同じ高効率な太陽電池を開発 - imec
[13:50 6/29] テクノロジー
「Salesforce Lightning for Outlook」がリリース
[13:49 6/29] 企業IT

求人情報