読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 2次元のcanvasを作成する

基本中の基本です。Html内にcanvasを作成して、描画をするための方法をメモしておきます。

メソッド
canvas.getContext( [ contextId ] )
canvas要素から描画コンテキストを取得します、引数には取得するコンテキストのタイプを渡します。特別な場合を除いて、文字列で「2d」と記述します。
サンプルソース
// DOMノードを取得するので、読み込み後に処理を行う
window.addEventListener('load', function(){
	var myCanvas = document.getElementById('canvas');
	if(myCanvas && myCanvas.getContext){
		var context = myCanvas.getContext('2d');
		drawProcess(context);
	}
}, false);

// 描画を行うための関数
function drawProcess(context){
    // canvasを通して実際の描画を行う
}
ポイント

DOMを使用してcanvas要素を取得するので、window.onload時にcanvasの取得を行います。
ブラウザがcanvasに対応しているか確認後、コンテキストを取得して描画処理を開始します。