canvas タグエレメント
canvas タグエレメントは、グラフィックを描写するためのタグエレメントです。編集しながらの描写するためには JavaScript が必要です。
<!-- 描写するタイミングのためのボタン -->
<button onclick=draw_Example()>描写する</button>
<canvas id="example" width="600" height="300"></canvas>
<script type="text/javascript">
function draw_Example(){
// コンテキストオブジェクトの生成
// 以下は ２D を描写するためのコンテキストオブジェクトを返す
var _context = document.getElementById('example').getContext('2d');
// 塗りつぶされた四角を描写する
_context.fillRect(50,50,300,260);
}
</script>
canvas タグエレメントに対応していないブラウザ用には、<canvas>、</canvas>の間のテキストが表示されます。
- ad -
canvas タグエレメントとJavaScript
canvas タグエレメントは JavaScript と併用することが前提です。<canvas> と JavaScript との関係は HTMLCanvasElement インターフェイスを参照してください。
canvas タグエレメントには描写のためのオブジェクトを呼び出す .captureStream()、.getContext()、.toDataURL()、.toBlob()、.transferControlToOffscreen() メソッドがあります。
例えば、.getContext('2d') メソッドは2次元の描写を行うためのオブジェクトを呼び出します。
呼び出されたオブジェクトには、矩形を描写する fillRect(x,y,w,h)、円弧を描写する arcTo() メソッドがあり、そのオブジェクトのプロパティやメソッドを利用して描写を行います。
- ad -