キャンバス上で画像を自由に拡大縮小する方法はありますか？

1年 ago
夏樹, 風
1 minute

Canvas内では、drawImage()メソッドを使用して画像を描画し、サイズを調整することができます。drawImage()メソッドには、描画する画像のオブジェクト、描画位置のx座標、描画位置のy座標の3つのパラメータがあります。さらに、drawImage()メソッドには、描画する画像の幅と高さを指定する2つのオプションのパラメータもあります。

画像の幅と高さを調整することで、画像の拡大縮小効果を実現することができます。具体的な手順は次の通りです：

  1. Canvasのコンテキストオブジェクトを取得する：var ctx = canvas.getContext(‘2d’);
  2. イメージオブジェクトを作成し、画像のソースを設定する：var img = new Image(); img.src = ‘画像のパス’;
  3. 画像の読み込みが完了したら、CanvasにdrawImage()メソッドを使用して画像を描画します：ctx.drawImage(img, x, y, width, height);

xとyは画像の描画開始位置の座標であり、幅と高さはそれぞれ画像の幅と高さを示しています。これらの4つのパラメータを調整することで、画像の位置やサイズを変更して、拡大縮小効果を実現することができます。

widthとheightの値を変更することで、画像を比例的に縮小することができます。例えば、画像の幅と高さをそれぞれ0.5倍することで、画像を元の半分のサイズに縮小することができます。

var width = img.width * 0.5;
var height = img.height * 0.5;
ctx.drawImage(img, x, y, width, height);

画像が完全に読み込まれる前にdrawImage()メソッドを呼び出すと、画像が表示されない可能性があります。Canvasに画像を描画する前に、画像が完全に読み込まれたことを確認するために、imgオブジェクトのonloadイベントで描画操作を実行することができます。

img.onload = function() {
  var width = img.width * 0.5;
  var height = img.height * 0.5;
  ctx.drawImage(img, x, y, width, height);
};
bannerAds