忍者ブログ

18Jan

[PR]

Posted by in

×

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

05Mar

Canvasで回転させて表示

Posted by No Name Ninja in 【Graphics】Canvas

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

DEMO

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

  //45度に回転
  ctx.rotate( 45 * Math.PI / 180 );

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

画像や図形を描写する前にContextのrotateメソッドで角度を指定するだけ。
ただ、画像を中心に回転してくれるわけではないので、そこが少し使いづらい。

PR

Comment


Vodafone絵文字 i-mode絵文字 Ezweb絵文字