Canvas辞典

このコーナーではHTMLのCanvasタグについて解説します。
どのような図形が、Canvasタグのどの機能を使えば実現できるのかを説明します。

機能の一覧

ここではCanvasタグの機能の中でも、IEに対応している機能について解説します。

分類項目解説するメソッド等
描画線の描画beginPath / closePath / moveTo / lineTo / stroke / bezierCurveTo / quadraticCurveTo
描画四角形の描画getContext / rect / stroke / fill / strokeRect / fillRect
描画円弧の描画arc
線の設定線の色の設定strokeStyle
線の設定線の太さの設定lineWidth
線の設定線の端部分の形状の設定lineCap
線の設定線結合部分の形状の設定lineJoin
線の設定線結合部分の尖らせ設定miterLimit
塗りの設定塗り色の設定fillStyle / createLinearGradient / createRadialGradient / addColorStop
塗りの設定不透明度の設定globalAlpha
描画域の設定キャンバス座標の設定translate
描画域の設定キャンバス角度の設定rotate

Canvasタグについて

Canvasタグは、HTML上に線を描画するための領域です。
HTMLで以下のようなCanvasタグを使って描画領域用意しておけば、JavaScriptを使ってこの描画領域へグラフィックを描画することができます。

<canvas id="cv" width="200" height="200">
</canvas>


ただ、このCanvasタグは、以下のような特定のブラウザにしか対応してません。

  • Safari
  • Opera 9
  • Firefox 1.5

ところが、Googleから「ExplorerCanvas」というライブラリが公開されていて、このライブラリを使うことで、以下のようなブラウザにも対応することができます。

  • IE 6.0
  • IE 7.0

各ブラウザにはそれぞれまともに描画できない機能もありますが、基本的な図形の描画は行えると思いますので、興味のある人は試してみて下さい。

「ExplorerCanvas」は、以下のサイトからダウンロードすることができます。
Download ExplorerCanvas

Copyright © 1999-2006 Hikijishi All Rights Reserved.
[] [cgp][0.000905036926269531]