画像を読み込む(drawImage) [html5 の Canvas を使ってみる：第廿九回]

drawImage(); を使って画像を読み込んでみる。

★html 側

<canvas id="drawImage"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: drawImage で 2 次元描画を行うことの定義
  var c = document.getElementById("drawImage").getContext('2d');

// 変数 target をイメージオブジェクトと定義
  var target = new Image();
// "DasEnde.jpg" をソースとして指定
// ファイル名の後にタイムスタンプを付け、
// キャッシュで読み込まれるのを防止
  target.src = "DasEnde.jpg?" + new Date().getTime();
// x:30、y:30 の座標に配置
// その際に画像が読み込まれてから処理を実行
  target.onload = function() {c.drawImage(target, 30, 30);}
}

すると、こうなる。画像を配置する座標を通る水平線を補助線として引いてみた。


以前にやってみた rotate(); も使って、画像を 10° 回転させてみる。

// 10° 回転
c.rotate(10 * Math.PI / 180);
var target = new Image();
target.src = "DasEnde.jpg?" + new Date().getTime();
target.onload = function() {c.drawImage(target, 30, 30);}

最後に、線形グラデーションもを上に重ねて、右側へいく程背景の白に馴染むようにしてみる。

var target = new Image();
target.src = "DasEnde.jpg?" + new Date().getTime();
target.onload = function() {
// この function の中に書かないと、
// グラデーションが先に描画され画像が乗っかるため、
// 期待通りにならなくなる。
  c.drawImage(target, 30, 30);
  c.rect(30, 30, 100, 100);
  g = c.createLinearGradient(30, 30, 130, 30);
  g.addColorStop(0, "rgba(255, 255, 255, 0)");
  g.addColorStop(1, "rgb(255, 255, 255)");
  c.fillStyle = g;
  c.fill();
}

確認環境：
Safari 5.0、Chrome 5.0.375.70、Firefox 3.6.3、Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5