図形を描くには?
canvasタグの書式
canvasタグに対応しているブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
canvasタグの属性一覧
属性 | 内容 |
グローバル属性 | ※グローバル属性のページを参照してください。 |
height | 描画する領域の高さを指定します。 指定しない場合、デフォルト値の「150」となります。 |
width | 描画する領域の横幅を指定します。 指定しない場合、デフォルト値の「300」となります。 |
canvasタグの解説
<canvas>は、スクリプトでビットマップ画像を描くための要素です。
<canvas>タグを使用すると、例えばグラフやゲームのグラフィックといった図形を動的に描くことができます。
描画は、図形を描く箇所に<canvas>を配置し、処理をJavaScriptで記述することで行います(サンプルソース参照)。
<canvas>を使うと、さまざまな視覚効果を実現することができますが、文書に<canvas>要素より適切な要素が利用可能であれば、<canvas>の使用は避けてください。
例えば、見出しをグラフィカルに表したいときは、<h1>~<h6>要素を使用し、CSSなどを利用してデザインをしてください。
なお、<canvas>に対応していないブラウザや、ブラウザのスクリプトを無効にしている場合など、ユーザーが<canvas>を使うことができない環境である場合を考慮して、<canvas> ~ </canvas>の中に代替コンテンツを指定してください。
canvasタグのサンプルソース1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル1</title>
<style>
#sample1 {
background-color: gray;
}
</style>
<script type="text/javascript">
window.onload = function (){
var canvas = document.getElementById('sample1');
if (canvas.getContext) {
// コンテキスト取得
var context = canvas.getContext('2d');
// 色を指定する
context.fillStyle = "blue";
// 棒グラフを描く
context.fillRect(30,40,30,280);
context.fillRect(80,120,30,200);
context.fillRect(130,100,30,220);
context.fillRect(180,60,30,260);
context.fillRect(230,110,30,210);
}
}
</script>
</head>
<body>
<h1>棒グラフのサンプル</h1>
<canvas id="sample1" width="300" height="320">グラフを表示できません。 </canvas>
</body>
</html>
canvasタグのサンプル画面1
canvasタグのサンプルソース2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>サンプル2</title>
<style>
#sample2 {
background-color: gray;
}
</style>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('sample2');
if(canvas.getContext) {
// コンテキスト取得
var context = canvas.getContext('2d');
//色を指定する
context.strokeStyle = 'rgb(00,00,255)';
context.fillStyle = 'rgb(00,00,255)';
// 折れ線グラフを描く
context.beginPath();
context.arc(30,150,3,0,Math.PI*2,false);
context.fill();
context.beginPath();
context.moveTo(30,150);
context.lineTo(80,100);
context.stroke();
context.beginPath();
context.arc(80,100,3,0,Math.PI*2,false);
context.fill();
context.beginPath();
context.moveTo(80,100);
context.lineTo(130,170);
context.stroke();
context.beginPath();
context.arc(130,170,3,0,Math.PI*2,false);
context.fill();
context.beginPath();
context.moveTo(130,170);
context.lineTo(180,30);
context.stroke();
context.beginPath();
context.arc(180,30,3,0,Math.PI*2,false);
context.fill();
context.beginPath();
context.moveTo(180,30);
context.lineTo(230,60);
context.stroke();
context.beginPath();
context.arc(230,60,3,0,Math.PI*2,false);
context.fill();
}
}
</script>
</head>
<body>
<h1>折れ線グラフのサンプル</h1>
<canvas id="sample2" width="300" height="200">グラフを表示できません。</canvas>
</body>
</html>
canvasタグのサンプル画面2
canvasタグの関連項目