Rotate image without CSS

[marcojrzx]

Hi everyone
this is my problem, i making a little practice and i want rotate a image but i don´t want use CSS only script

var img;
function init(){
        ctx = document.getElementById("canvas").getContext("2d");

img = new Image();
        img.src = "http://postimg.org/image/qj0abntbh/";
        img.xpos = 50;
        img.ypos = 10;
  img.onload = function() {
            TweenLite.ticker.addEventListener("tick", loop); 
        }
    
  function loop(){
         ctx.clearRect(0, 0, 800, 600)
         ctx.drawImage(img, img.xpos, img.ypos);       

      }  
  TweenMax.to(img, 7, { rotation: 360, delay:2.2, repeat: 5});

}

thanks

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

My knowledge of canvas is very limited.

 

What you could try is call an onUpdate callback on the tween in order to apply canvas' native rotate() method on each tick. For that you'll have to create an object with the angle value and pass that to the rotate() method:

var img;
function init()
{
  ctx = document.getElementById("canvas").getContext("2d");

  img = new Image();

  img.src = "http://websnap.cl/samples/img/Corruptus-In-Extremis.jpg";
  img.xpos = 150;
  img.ypos = 112;

  img.onload = function()
  {
    TweenLite.ticker.addEventListener("tick", loop); 
  }
    
  function loop()
  {
    ctx.clearRect(0, 0, 800, 600)
    ctx.drawImage(img, img.xpos, img.ypos);
    // canvas works with radians, so we convert the value given in degrees 
    ctx.rotate( angleObj.angle * Math.PI/180 );
  }

  angleObj = {angle:0};

  TweenMax.to(angleObj, 7, 
    {
      angle: 360, delay:1, repeat: 5
    });
}

Also your URL is pointing to a directory's root, not a file.

 

You could try Kinectic JS for this and the engine's Kinectic plugin in order to make this easier.

 

Finally, is always easier and faster to see a live reduced sample working that we can edit in order to see what could be the issue, please read this post;

 

http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Rodrigo.

[marcojrzx]

Thanks Rodrigo for you help.