| 目次 |
|---|
|
・画像等を読み込む ・読み込む画像等を準備 ・画像等を描画する ・Canvasの中の画像 |
<canvas>要素では、JPEGやPNGといったブラウザに対応した画像であれば、それを組み込むことができます。
「canvas要素(3) グラデーション : 背景パターンを指定する」でも画像を背景として利用することは出来ます。
ここではより、多彩な応用がある画像を読み込む方法について紹介します。
まずは読み込む画像等を準備する必要があります。
画像は、同じHTML内の<img>要素、<canvas>要素を利用することが可能です。
また、スクリプト内で新たな<img>要素を作成し、読み込むことも可能です。
1. 同じドキュメント内の<img>要素を利用する
同じドキュメント内の要素を利用することが出来ます。
これはHTMLとしては、<img>要素で作成し、<canvas>要素を用いてよりビジュアルな効果を加えたい場合などで応用できます。
また、HTML5に対応しないブラウザでも一応画像を表示出来る方法とも言えます。
リスト1. <img>要素を利用
/* <img>要素を指定する。*/
var img = document.getElementsByTagName('IMG');
/* <img>要素 のidを指定する。*/
var img = document.getElementById(/* <img>要素のid */);
2. 同じドキュメント内の<canvas>要素を利用する
同じドキュメント内の<canvas>要素を利用することが出来ます。
<canvas>要素のサムネイルビューなどを作る場合に応用できます。
リスト2. <canvas>要素を利用
/* <canvas>要素を指定する。*/
var img = document.getElementsByTagName('CANVAS');
/* <canvas>要素 のidを指定する。*/
var img = document.getElementById(/* <canvas>要素のid */);
3. 新たに画像を読み込む
<canvas>要素で独自に画像を読み込みます。
画像を動的に読み込み、重ねるなどの効果で応用が可能です。
リスト3. 画像を読み込む
/* <img>要素 を作成する。*/ var img = new Image(); // 新しい Image オブジェクトを作る img.src = 'sample01.jpg'; // ソースのパスを設定する
但し、画像の読み込み中は、スクリプトが待ち状態になります。
あらかじめ、読み込む画像が決まっている場合は「プリロード」などの処理が必要です。
以下は次の画像を用いて説明します。
「読み込む画像等を準備」で読み込んだ画像等を、実際に<canvas>要素内に書き込みます。
描画には「drawImage」メソッドを用います。
- drawImage(image, x, y [, w, h])
-
imageオブジェクトを、<canvas>要素内の座標(x,y)に配置します。
幅wと高さhを指定すると、その大きさに画像を伸縮します。(省略可)
- drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
-
元画像(imageオブジェクト)をトリミングして描画します。
元画像の左上から(sx, sy)から、幅sw, 高さshの領域でトリミングします。
トリミングされた画像を、<canvas>要素内の座標(dx,dy)に配置します。
その際、幅dwと高さdhを指定すると、その大きさに画像を伸縮します。(省略不可)
リスト4. 画像等を描画する
context.drawImage(img, 10, 10); //座標(10,10)に配置 context.drawImage(img, 240, 10, 70, 40); //幅70,高さ40に縮小して配置 context.drawImage(img, 0, 0, 100, 100, 240, 60, 80, 80); //トリミングして配置
コーディング例
<canvas>要素内で画像を使う例として、ギャラリー的な使い方がよく紹介されています。
※ギャラリー的な扱いならば、CSS3を使う方がシンプルです。
<canvas>要素内で画像を使う例としては、他には画像に注釈を加えたり、コメントを重ねることにも使えます。
リスト5. 画像の拡大
/* 画像を配置 */ context.drawImage(img, 10, 10); //座標(10,10)に配置 context.drawImage(img, 30, 0, 100, 80, 240, 10, 200, 160); //トリミングして配置 /* 引き出し線 */ context.strokeStyle = 'red'; //線色 context.beginPath(); //書き始め context.moveTo(140, 10); //引き出し線(上) context.lineTo(240, 10); context.stroke(); context.moveTo(40, 90); //引き出し線(下) context.lineTo(240, 170); context.stroke(); context.strokeRect(40, 10, 100, 80); //参照枠 context.strokeRect(240, 10, 200, 160); //拡大枠 context.fillStyle = 'rgba(00,00,255,0.2)'; //参照枠色 context.fillRect(40, 10, 100, 80); //参照領域
コーディング例