HTML5 xoay hình ảnh bằng canvas

Làm cách nào để xoay hình ảnh bằng chức năng "xoay" của khung hình xung quanh tâm của hình ảnh thay vì xoay quanh điểm gốc.HTML5 xoay hình ảnh bằng canvas

Hãy xem xét ví dụ sau:

<html> 
    <head></head> 
    <body> 
     <canvas id="tmp" style="width: 300px; height: 300px; border: 1px red solid" /> 
     <script type="text/javascript"> 
      var deg = 0; 

      function Draw() { 
       var ctx = document.getElementById('tmp').getContext('2d'); 

       ctx.save(); 
       ctx.fillStyle = "white"; 
       ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height); 
       ctx.fillStyle = "red"; 

       ctx.rotate(deg * 0.0174532925199432957); //Convert to rad's 
       ctx.fillRect(50, 50, 20, 20); 
       ctx.restore(); 

       deg+=5; 

       setTimeout("Draw()", 50); 
      } 

      Draw(); 
     </script> 
    </body> 
</html>

trong ví dụ này hình vuông màu đỏ có thể xoay quanh orgin ở 0,0. Nói rằng tôi muốn xoay hình vuông xung quanh trung tâm của nó. Tôi đã cố gắng sử dụng dịch để di chuyển nó đến nguồn gốc sau đó xoay sau đó sử dụng dịch một lần nữa để di chuyển nó lại như vậy:

 ctx.translate(-(50 + 10), -(50 + 10)); //Move to origin 
     ctx.rotate(deg * 0.0174532925199432957); //rotate 
     ctx.translate(50, 50); //move back to original location 
     ctx.fillRect(50, 50, 20, 20); 
     ctx.restore();

Nhưng có vẻ như cuộc gọi đến các dịch chức năng ghi đè dịch trước đó và không kết hợp các phép biến đổi. Làm cách nào để đạt được hiệu quả tôi muốn?

Nguồn

2011-08-19 Mike

Đây có phải là những gì bạn đang tìm kiếm: jsFiddle?

//Move to center of rectangle 
ctx.translate(60, 60); 
ctx.rotate(deg * 0.0174532925199432957); //rotate 
//Draw rectangle 
ctx.fillRect(-10, -10, 20, 20); 
ctx.restore();

Lưu ý rằng bạn nên sử dụng Math.PI/180 thay vì số thập phân lớn.
Tôi cũng đặt width và height chính xác trên canvas và thay đổi setTimeout của bạn để không sử dụng eval().

Nguồn

2011-08-19 06:50:16

HTML5 xoay hình ảnh bằng canvas

Trả lời

Các vấn đề liên quan