画像の組み込み
キャンバスに画像を組み込みます。必要であればサイズを指定して組み込むことができます。さらに範囲を指定してトリミングを行い、その部分を組み込むことも可能です。また、画像はImageオブジェクトを生成して、それに読み込ませます。それぞれのコードは以下の通りです。
// 画像の組み込み drawImage(image, dx, dy); // サイズを指定した画像の組み込み drawImage(image, dx, dy, dw, dh); // 画像をトリミングして組み込み drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh); // 画像の読み込み var img = new Image(); // Imageオブジェクトの生成 img.src = "image.gif"; // 画像の読み込み
また、以下の1番のように画像を組み込むと、文法的には問題はありませんが、ブラウザ側でJavaScriptのエラーが発生し、数回更新しなければブラウザにロードされず、画像が表示されません。この問題を回避するためには2番の方法を用いるのですが、詳しい事はこちらを参照して下さい。
// 1番：問題がある例
var img = new Image();
img.src = "image.gif";
cx.drawImage(img, 0, 0);
// 2番：問題を改善した例
var img = new Image();
img src = "image.gif?" + new Date().getTime();
img.onload function(){
cx.drawImage(img, 0, 0);
}
サンプル
サンプルでは、まず左上に単純に画像を表示するものを示しています。右上にはサイズを(dw, dh)で指定して表示しています。左下は元の画像の一部をトリミングして表示しています。
右下の画像はclipメソッドを用いて、画像の一部を丸い形で表示しています。このclipメソッドを用いると、それまでのパスが自動的に閉じられ、その中身が窓のようになると考えれば良いでしょう。そしてその窓の奥に画像を配置して、ブラウザからは窓を覗いている、というようなイメージです。サンプルでは分かりやすく言えば、丸い窓の奥に画像を配置して、覗きこんでいる感じです。
// 画像の読み込み
var img = new Image();
img.src = "img/hato_001.jpg?" + new Date().getTime();
img.onload = function() {
// 画像を表示（左上）
cx.drawImage(img, 10, 10);
// 画像のサイズを指定して表示（右上）
cx.drawImage(img, 170, 30, 80, 120);
// 画像をトリミングして表示（左下）
cx.drawImage(img, 40, 50, 30, 30, 50, 200, 30, 30);
// クリッピング領域を生成し、その中に画像を表示
cx.beginPath();
cx.arc(220, 220, 30, 0, Math.PI * 2, false);
cx.clip();
cx.drawImage(img, 165, 150);
}