04Nov
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
05Mar
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メソッドで角度を指定するだけ。
ただ、画像を中心に回転してくれるわけではないので、そこが少し使いづらい。