Canvasを使用して画像をどのように回転させるのですか?
-
06-07-2019 - |
質問
Canvasを使用して画像を回転させることができません。
画像を回転できないため、キャンバスを回転する必要があります。キャンバスをある程度回転させると、回転させる原点が変わります。この変更を追跡する方法がわかりません。
これは私の現在のコードです: http://pastie.org/669023
また、デモは http://preview.netlashproject.be/cog/ <にあります。 / p>
もし何かを試してみたいなら、圧縮されたコードと画像は http:/にあります。 /preview.netlashproject.be/cog/cog.zip
解決
コードを修正しました:
var rotation = 0;
function draw(){
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over';
ctx.save();
ctx.clearRect(0,0,200,200);
ctx.translate(100,100); // to get it in the origin
rotation +=1;
ctx.rotate(rotation*Math.PI/64); //rotate in origin
ctx.translate(-100,-100); //put it back
ctx.drawImage(cog,0,0);
ctx.restore();
}
ここで重要なことは、回転する前に最初に画像を原点に変換し、元に戻す必要があることです!
他のヒント
次のように使用できる可能性があります: http://wilq32.googlepages.com/ wilq32.rollimage222
テストは次のとおりです。 http://www.antiyes.com/test/index .php
所属していません StackOverflow