canvas要素の基本的な使い方TweetHTML5で新たに追加されたcanvas要素を使うと、プラグインに頼ることなくアニメーションなどを描画することができます。旧バージョンのブラウザでは対応していないものもあるため、まだまだ使う場面は限られると思いますが、将来的には強力な表現方法の一つになることは間違いないでしょう。原点を基準とした描画HTML5のcanvas要素まず、HTMLでcanvas要素を使うには下記のように記述します。width属性で幅、height属性で高さを指定できるほか、id名やクラス名などの属性も指定することができます。canvas要素の中には、canvasをサポートしていない環境での代替表示コンテンツを指定できます。id=&quot;my-canvas&quot;&gt;HTML5のcanvasがサポートされていないブラウザでの代替表示&lt;/canvas&gt;canvasへのCSSの適用canvasには、他のHTML要素と同じようにCSSを適用することができます。下記の例では、id名がmy-canvasのcanvas要素にCSSを適用させています。padding:0px;}古いIEをcanvasに対応させるexcanvas.jsIEは、バージョン9でcanvasに対応したので、古いIEはcanvasに対応していませんが、Googleのexplorercanvasで公開されているexcanvas.jsを使うことにより、古いIEでもcanvasを使えるようになります。使い方は、下記のようにHTMLの<head>内でIE9未満の場合のみexcanvas.jsを読み込むようにします。私の確認した限り、現在のexcanvas_r3では描画も遅く対応していない機能も多いため、古いブラウザ用には代替コンテンツを表示させた方が親切な場合もあるでしょう。&lt;/head&gt;ブラウザがcanvasに対応しているかを判定するJavaScriptJavaScriptを使えば、ブラウザがcanvasに対応しているかを判定することができます。下記の例では、canvasに対応していないブラウザではcatchブロックが実行されます。alert(&quot;canvas非対応&quot;);}canvasへの基本的な描画方法canvasへの描画の手順としては、まずgetElementById()などを通して取得したcanvas要素からgetContext()でコンテキストを取得します。取得したコンテキストを通して描画を実行します。30)の位置に縦横300pxの矩形を線で描画しています。後々、オブジェクトを変形させたり、使い回したりすることを考慮すると、オブジェクトは原点を中心に描画した方が有利です。そのためには、save()で変更していないコンテキストの状態を保存し、translate()で座標を移動してから描画します。最後にrestore()でコンテキストを変更前の状態に戻します。