cman.jpWEBページ作成
広告
<canvas> 「スクリプトでグラフィックスを描く領域」[読み方：キャンバス]
<canvas>タグは、JavaScriptなどのスクリプト言語で図形を描く領域（エリア）を指定します。
<canvas>は領域を確保するだけで、スクリプト言語により図形を描く必要があります。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<canvas>は、HTML5で追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<canvas> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ エンベディッドコンテンツ | エンベディッドコンテンツを子要素にもてる場所 | トランスペアレント | 不可 |
<canvas>の属性
【構文】
<canvas width="幅" height="高さ">
～canvasタグが使用できない場合のメッセージ～
</canvas>
～canvasタグが使用できない場合のメッセージ～
</canvas>
<canvas>のサンプル
<canvas width="300" height="200" id="samp1"style="background-color:#eee;">
<p style="color: red;">使用中のブラウザがcanvasに対応していません</p>
</canvas>
<script type="text/javascript">
<!--
function canvasSample() {
var cnvs = document.getElementById('samp1'); //キャンバス取得
if (cnvs.getContext) {
var wct = cnvs.getContext('2d'); //コンテキスト取得
wct.strokeStyle = 'rgb(0, 0, 255)'; // 枠四角
wct.strokeRect(30,20,220,160);
wct.fillStyle = "rgb(255,0,0)"; // 赤四角
wct.fillRect (50, 40, 80, 60);
wct.fillStyle = "rgba(0, 255, 0, 0.5)"; // 緑四角
wct.fillRect (100, 70, 80, 60);
wct.fillStyle = "rgba(0, 0, 255, 0.5)"; // 青四角
wct.fillRect (150, 100, 80, 60);
}
}
canvasSample();
//-->
</script>
<p style="color: red;">使用中のブラウザがcanvasに対応していません</p>
</canvas>
<script type="text/javascript">
<!--
function canvasSample() {
var cnvs = document.getElementById('samp1'); //キャンバス取得
if (cnvs.getContext) {
var wct = cnvs.getContext('2d'); //コンテキスト取得
wct.strokeStyle = 'rgb(0, 0, 255)'; // 枠四角
wct.strokeRect(30,20,220,160);
wct.fillStyle = "rgb(255,0,0)"; // 赤四角
wct.fillRect (50, 40, 80, 60);
wct.fillStyle = "rgba(0, 255, 0, 0.5)"; // 緑四角
wct.fillRect (100, 70, 80, 60);
wct.fillStyle = "rgba(0, 0, 255, 0.5)"; // 青四角
wct.fillRect (150, 100, 80, 60);
}
}
canvasSample();
//-->
</script>
留意事項
- <canvas>タグだけでは領域確保のみで意味を成しません。通常はJavaScriptのContext（コンテキスト）を利用し図形を描きます。
- <canvas>タグは、HTML5で追加されたタグのため、対応していないブラウザも多くあります。
ただし、IE7,IE8なども対応していません。
広告