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