HTML5 bir görüntüyü kanvasla döndürme

Bir görüntünün ortasındaki "döndürme" işlevini kullanarak, görüntünün ortası etrafında döndürmek yerine, orijinal noktanın çevresinde döndürülmesini nasıl sağlarım. kırmızı kare 0,0 menşe etrafında döndürülür bu örnekteHTML5 bir görüntüyü kanvasla döndürme

<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>

aşağıdaki örneği ele alalım. Merkezin etrafındaki kareyi döndürmek istediğimi söyle. Sonra o yüzden böyle geri hareket ettirmek için tekrar çevirmek kullanmak döndürmek kökenli taşımak için tercüme kullanmayı denedim:

 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();

Ama önceki çevirmek ve yapmaması geçersiz çevirmek işlevine çağrıları benziyor Dönüşümleri birleştirin. O zaman neden istediğim etkiyi elde ederim?

kaynak

2011-08-19 Mike

Bu ne için arıyorsunuz: jsFiddle? O büyük ondalık yerine Math.PI/180 kullanmalıdır

//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();

Not.
Ayrıca width ve height ayarlarınızı tuval üzerine düzgün bir şekilde ayarlayın ve ürününü eval() kullanmadan değiştirdim.

kaynak

2011-08-19 06:50:16

HTML5 bir görüntüyü kanvasla döndürme

cevap

İlgili konular