18Jan
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
05Mar
Posted by No Name Ninja in 【Graphics】Canvas
Canvasで図形や画像を回転させて表示させることができます。
DEMOcanvas = 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メソッドで角度を指定するだけ。
ただ、画像を中心に回転してくれるわけではないので、そこが少し使いづらい。