この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:10
ページ更新者:guest
更新日時:2026-05-17 06:42:28

タイトル: Canvas API

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

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

 

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

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

 

利用例）

【HTML】

HTML5のCanvas要素に対応していないブラウザの場合、この文章が表示される。

・HTMLで、要素の幅と高さ、および、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の仕様で定められたメソッドやプロパティを使用し、※具体的な描画内容を指定。

※項目を参照