カテゴリー

キーワード

 
> canvas要素を紹介します(IE8...

canvas要素を紹介します(IE8にも対応) 【HTML5 実践編】


2015 年 3 月 16 日 投稿    view: 10416
タグ:
このエントリーをはてなブックマークに追加

canvas要素を紹介(IE8にも対応)

こんにちは、WEBマーケティング部の杉尾です。
今回はcanvas要素を紹介します。


canvasは前々回まで2回に分けて紹介したSVGと同じく、図形を描く際に使用します。
2つの違いを説明し、その後、参考ソースをご覧いただきます。


SVGについてはコチラ ⇒ svg要素を紹介します。IE8にも対応【HTML5 実践編】



SVGとCanvasの使い分け

まず、以下の表をご覧ください。


SVGとCanvas、それぞれの特徴

SVG Canvas
ベクター形式なので、画像を拡大しても画質が悪くならない
XMLベースの言語で画像オブジェクトの作成にタグを用いる
オブジェクトが増えると、DOMに追加するオブジェクトが増えるのでパフォーマンスが低下
ビットマップ形式なので画像を拡大すると画質が悪くなる。
Javascriptを使い、ピクセルで描画
画面が大きくなるほど描画するピクセル数も増加するためパフォーマンスが低下
高速描画が特長

使い分けは?

おおよそ、以下のような使い分けが良さそうです。


SVG

大きな画像や(ユーザーが操作する)インタラクティブな画像に用いる。
【例】
地図やUI(ユーザーインターフェイス)


Canvas

編集のスピードが速いため、速く描画する必要があるもの。
【例】
アニメーション、ゲーム


実装準備

いつものようにcaniuse.comを見に行きます。


caniuse.com canvas要素がつかえるかどうか


IE8以下は無理ですが、他の主要ブラウザには全て対応しています。


IE8にも対応させる

IE8対応のために、ライブラリを読み込みます。
Google が公開したJavaScriptライブラリ『Explorer Canvas』です。


これを用いることでIE6,IE7,IE8にも対応できます。
(canvas要素の全てのプロパティに対応できるわけではなさそうですが、あまり複雑なものでなければ大丈夫なようです)


ここからhttps://code.google.com/p/explorercanvas/ダウンロードしてください。


ダウンロードしたら、それを解凍してください。

excanvas_r3というフォルダが出てきます。
その中にあるexcanvas.jsというファイルを任意のフォルダにアップロードしてください。
下記ソースでは、jsというフォルダを作り、その中にexcanvas.jsを入れています。


IE8以下以外のときに、余分なコードを読み込まないために、以下のようにhead内に書きます。

  <!--[if lt IE 9]>
   <script type="text/javascript" src="js/excanvas.js"></script>
<![endif]-->

これを踏まえて、参考ソースをご覧ください。


参考ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>canvas要素</title>
<!--[if lt IE 9]>
   <script type="text/javascript" src="js/excanvas.js"></script>
<![endif]-->
<script>
    onload = function() {
      myimage();
    };

    function myimage() {
        var circle = document.getElementById('circle');
        var ctx = circle.getContext('2d');
        ctx.beginPath();
        ctx.arc(50,50,50,0,Math.PI*2,true);
        ctx.fillStyle = "#ff0000";
        ctx.fill();
    }
</script>
</head>
<body>
    <div>
        <canvas id="circle" width="100" height="100"></canvas>
    </div>
</body>
</html>

【3/17 コード追記しました】


解説

10行目はページをロードすると同時にmyimageという関数を実行しなさいという指定です。
myimage関数は15行目から指定しています。


15行目16行目で、Canvasを使うための準備を行っています。
具体的にはvar canvas = document.getElementById('circle');で、circleというidを持つ要素を参照しています。
つまり、26行目の『canvas id="circle"』の部分ですね。
それから16行目のvarは変数を示しており、その変数名が『ctx』です。
getContext('2d')というのは2D、つまり平面(図形)を描くという指定です。
ここでは15行目で参照したcircleという部分に『ctx』という平面図形を描きますよという意味になります。


17行目のbeginPath() で描画サブパスを初期化しています。
18行目のarc(50,50,50,0,Math.PI*2,true)の部分が円弧を描くという指定です。
詳しくは次回紹介しますが、
arc(x, y, radius, startAngle, endAngle, anticlockwise)
という順で指定していきます。
ここではひとまず、これで円が描けるということを理解するだけでOKです。


19行目は図形の塗りつぶしの色を指定します。
20行目は図形の塗りつぶしを指定します。
ここではカラーコード#ff0000を指定していますので、円が赤で塗りつぶされています。


でき上がりの画像がこちらです。



注意点

上記ソースではHTMLに直接、canvasタグを書いているので問題ありませんが、document.createElementを使ってcanvas要素を生成する場合、excanvasの環境ではcanvas要素として初期化されません。
canvas要素にあるはずのgetContext関数が存在しない状態になってしまいます。
このような場合はexcanvasの初期化関数を使って明示的に初期化する必要があります。


具体的にはこんな感じです。
Javascriptのソース内に書き入れてください。


var canvas = document.createElement('canvas');
if (typeof G_vmlCanvasManager !== 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');

まとめ

HTML5以前のようにimgタグを使って画像を貼るということを行わなくても、今回紹介したCanvas、前々回までのSVG、それからCSSを使えば色々な図形を描画できるようになりました。


それぞれ特徴が違いますので、用途によって使い分ければ表現の幅が広がりますね。


次回はcanvas要素を使って描ける図形について紹介したいと思います。


最後までお読みいただき、ありがとうございました。


書きました。⇒ canvas要素で図形を描画(円、直線、三角、矩形) 【HTML5 実践編】

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事