Canvasで画像や図の縦横幅を変更して表示

26Apr

[PR]

Posted by in

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

07Mar

Canvasで画像や図の縦横幅を変更して表示

Posted by No Name Ninja in 【Graphics】Canvas

Canvasで図形や画像を伸縮させて表示させることができます。

DEMO

  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');

  //横と縦の伸縮の比率を指定
  ctx.scale(0.5, 0.8);

  var curImage = new Image();
  curImage.src = 'http://praiation.shiriagari.com/javascript_samples/0004/2-2/test.jpg';
  curImage.onload = function(){
    ctx.drawImage(curImage, 0,0,400,300);
  }

scaleメソッドを使用して、画像を横幅を自由に設定できます。