下のCanvasに画像を表示させます
Html コード
<canvas id="canvas-base" width="640px" height="480px"></canvas>
canvasの属性width、heightには必ずサイズを指定して下さい。
指定しないとちゃんと画像が表示されません。
Javascript コード
/* canvas オブジェクトの取得 */ var canvas = document.getElementById( ’canvas-base’ ); /* canvas要素 ＆ ブラウザ未対応の対処 */ if( ! canvas || ! canvas.getContext ) return false; /* 2D コンテキスト */ var ctx = canvas.getContext( '2d' ); /* img オブジェクトの作成 */ var img = new Image( ); /* 画像のキャッシュを無効にするため細工 */ img.src = "img0012.jpg?" + new Date().getTime(); /* 画像が読み込み終わるまで待ってから画像を表示 */ img.onload = function( ) { ctx.drawImage( img, 0, 0 ); }
- Canvasのコンテキストを取得
-
イメージオブジェクトに画像を読み込む
※ファイル名に細工することによってキャッシュを無効にします、こうしないとブラウザによっては
キャッシュがある場合、onloadイベントが発生しない物があるっぽいです。 - 読み込み終了後Canvasに書き込みます