Canvasの使い方－Canvasリファレンス

トップページ > Canvas > Canvasの使い方

★Canvasリファレンス

Canvasの使い方

■Canvasによる描画指定の一般的な手順

Canvasでは、HTMLとJavaScriptを組み合わせて描画内容を指定します。 Canvasによる描画は、大まかに以下のような流れとなります。

HTMLで、<canvas>要素の幅と高さ、および、id名を指定する
getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする
canvasAPIの仕様で定められたメソッドやプロパティを使用して、具体的な描画内容を指定する

■HTMLで、<canvas>要素の幅と高さ、および、id名を指定する

HTMLソース

<canvas id="sample" width="400" height="300">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>

HTMLの側では、<canvas>要素で、描画領域の幅と高さ、および、id名を指定します。 <canvas>要素の固有属性はwidth属性とheight属性だけです。

<canvas>要素にはid属性で名前をつけます。関連付けの取っ掛かりとしてid名を付けるわけですが、こうした取っ掛かりのことをノードと呼びます。このノードに対してJavaScriptから描画内容を指定します。

<canvas>～</canvas>の中には、 Canvasをサポートしていない環境向けの代替内容を指定することができます。 Canvasがサポートされているブラウザでは図形が表示され、サポートされていないブラウザでは代替内容が表示されます。

尚、<canvas>要素には、CSSでスタイルを適用することができますが、 CSSによるスタイリング指定はCanvasの描画内容には影響を与えません。

■getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする

JavaScrptソース

var canvas = document.getElementById('sample');
var context = canvas.getContext('2d');

JavaScrptの側では、getElementByIdメソッドでid名を指定してHTML側と関連付けます。上記のサンプルHTMLソースでは、<canvas>要素に id="sample" という名前を付けていますが、 JavaScript側でも document.getElementById('sample') と指定することで、HTMLとJavaScriptを関連付けられます。こうして取得したノードには、 var canvas の記述で canvas という名前を付けています。

次に、getContextメソッドで描画機能を有効にします。現在のところ、getContextメソッドに指定できる引数は '2d' のみです。 canvas.getContext('2d')の指定で、描画機能が利用できるように2Dコンテキストを取得しています。つまり、HTMLソース中のid="sample"の部分に、描画機能を使用することを定義しています。

上記のJavaScriptソースの２行で、描画機能を有効にして、それをHTMLソース中のどの部分に反映させるかを指定しました。この時点では、まだ具体的な描画内容は指定されていません。

■Canvasを利用できない環境でスクリプトを実行させないようにif文で囲んでおく

JavaScrptソース

var canvas = document.getElementById('sample');
if (canvas.getContext){
	var context = canvas.getContext('2d');
	//ここに具体的な描画内容を指定する
}

Canvasをサポートしていない旧いブラウザなどでスクリプトを実行させると、環境によってはエラーが起きるかもしれません。そこで、Canvasを利用できない環境ではスクリプトを実行させないように、描画実行の指定部分をあらかじめif文で囲んでおきます。

if (canvas.getContext){ ～ } で、描画機能の利用を宣言する部分と、その後に続く具体的な描画内容を指定する部分を囲みます。そうすることで、getContextがサポートされていない環境ではこれらの指定が実行されなくなり、無駄なスクリプトの実行やエラーを回避することができます。

上記のJavaScriptソースは、 getElementById()で図形を描画する場所を取得して、 getContext()が有効な場合にのみgetContext('2d')で描画機能を利用することを定義して、その後に続けて具体的な描画内容を指定する、という流れになっています。

■canvasAPIの仕様で定められたメソッドやプロパティを使用して、具体的な描画内容を指定する

HTMLソースとJavaスクリプトソースを一つにまとめると以下のようなソースとなります。 <body>要素への onLoad="test()" の指定により、 HTMLファイルが読み込まれた際にJavaScriptのtest()関数が呼び出されます。

尚、test()という関数名は筆者が任意で付けた名前です。また、test()関数を呼び出すためのイベントは、必ずしもページの読み込み時（onLoad）である必要はなく、ユーザーが何かをクリックしたときや、タイマーで一定時間が経過したときなどのイベントをきっかけにしても良いでしょう。アイデア次第でインタラクティブな面白い効果を実現することができます。

HTML + JavaScriptソース

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript">
<!--
function test() {
  //描画コンテキストの取得
  var canvas = document.getElementById('sample');
  if (canvas.getContext) {
    var context = canvas.getContext('2d');
    //ここに具体的な描画内容を指定する
    //左から20上から40の位置に、幅50高さ100の四角形を描く
    context.fillRect(20,40,50,100);
    //色を指定する
    context.strokeStyle = 'rgb(00,00,255)'; //枠線の色は青
    context.fillStyle = 'rgb(255,00,00)'; //塗りつぶしの色は赤
    //左から200上から80の位置に、幅100高さ50の四角の枠線を描く
    context.strokeRect(200,80,100,50);
    //左から150上から75の位置に、半径60の半円を反時計回り（左回り）で描く
    context.arc(150,75,60,Math.PI*1,Math.PI*2,true);
    context.fill();
  }
}
//-->
</script>
</head>
<body onLoad="test()">
<h2>Canvasで図形を描く</h2>
<canvas id="sample" style="background-color:yellow;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>

↓↓↓

ブラウザ上の表示

Canvasで図形を描く

上記のサンプルでは、CSSによる background-color:yellow; の指定で <canvas>要素の背景を黄色くしていますが、これはCanvasの描画領域を分かりやすくするためです。

また、 fillRect()メソッド・ strokeRect()メソッド・ arcメソッド()・ fill()メソッド・ strokeStyle属性・ fillStyle属性を利用して、塗りつぶしの四角形・枠線の四角形（青）・塗りつぶしの半円（赤）を描いています。これらの具体的な図形を描く際に利用する様々なメソッドや属性については、それぞれのページで紹介しています。

★Canvasリファレンス

■Canvasによる描画指定の一般的な手順

■HTMLで、<canvas>要素の幅と高さ、および、id名を指定する

HTMLソース

■getElementByIdメソッドでHTMLと関連付けて、getContextメソッドで描画機能を有効にする

JavaScrptソース

■Canvasを利用できない環境でスクリプトを実行させないようにif文で囲んでおく

JavaScrptソース

■canvasAPIの仕様で定められたメソッドやプロパティを使用して、具体的な描画内容を指定する

HTML + JavaScriptソース

ブラウザ上の表示

Canvasで図形を描く

Sponsors