Jump to content
GreenSock

marcojrzx

Rotate image without CSS

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×