Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
marcojrzx

Rotate image without CSS

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

×