Canvasとは、HTML5から新しく追加された図形を描くための技術仕様で、

HTMLの<canvas>要素とJavaScriptを組み合わせて図形を描画する。

 

 <canvas>を使用することで、標準のHTMLとJavaScriptだけで、

グラフやゲームグラフィックスなどの図形を表示できるようになる。

 

利用例）

【HTML】

<canvas id="example" width="150" height="150"> HTML5のCanvas要素に対応していないブラウザの場合、この文章が表示される。 </canvas>

・HTMLで、<Canvas>要素の幅と高さ、および、id名を指定。

 

【javasclipt】

var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(0,0,255)"; context.fillRect(30, 30, 50, 50);

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

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

※項目を参照