タイトル: CanvasAPI
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の仕様で定められたメソッドやプロパティを使用し、※具体的な描画内容を指定。
※項目を参照