Html5 Canvas Resim Döndürme (Image rotate)

Bu makalede canvas içerisinde bir image nesnesinin nasıl döndürüleceği anlatılacaktır. Anlatım kodlar üzerindedir.

Gereksinim : <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

HTML : 

<canvas id="canvas" width=300 height=300></canvas><br>
 <button id="clockwise">Rotate right</button>
 <button id="counterclockwise">Rotate left</button>

CSS : 

body{ background-color: ivory; }
 canvas{border:1px solid red;}

Script :

var canvas=document.getElementById("canvas"); // Canvas çağrılır
 var ctx=canvas.getContext("2d"); // context değeri verilir. Bu değer 2d olmak zorundadır.

var angleInDegrees=0; // Başlagıç değeri "0" olan bir değişken yaratılır

var image=document.createElement("img"); // image nesnesi yaratılır
 image.onload=function(){ // image yüklediğinde 
 ctx.drawImage(image,canvas.width/2-image.width/2,canvas.height/2-image.width/2);

 // drawImage ile resim verilen değerler ile boyutlandırılarak oluşturulur.
 }
 image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";  // Bir image çağırıyoruz.

$("#clockwise").click(function(){
 angleInDegrees+=90; // clockwise butonuna her tıklandığında resim sağ yönde 90 derece dönecek
 drawRotated(angleInDegrees); // sağa doğru 90 derece dönen resim tekrar canvas içine eklenecek
 });

$("#counterclockwise").click(function(){
 angleInDegrees-=90; // clockwise butonuna her tıklandığında resim sol yönde 90 derece dönecek
 drawRotated(angleInDegrees); // sola doğru 90 derece dönen resim tekrar canvas içine eklenecek
 });

function drawRotated(degrees){  // Açı hesabını yaptığımız fonksiyon
 ctx.clearRect(0,0,canvas.width,canvas.height);
 ctx.save();
 ctx.translate(canvas.width/2,canvas.height/2);
 ctx.rotate(degrees*Math.PI/180);
 ctx.drawImage(image,-image.width/2,-image.width/2);
 ctx.restore();
 }

http://jsfiddle.net/m1erickson/6ZsCz/ linkten nasıl çalıştığını görebilirsiniz. Kolay gelsin.