jquery rotate: changing the point of rotation possible? (transform canvas function)

Question

I'm trying to do an amimation by rotating an image with the jquery roate plugin. Unfortunately this plugin doesn't change it's point of rotation it's always centered.. and it doesn't have a parameter for this

I've found that doing this with canvas I can set it with canvas.transform() function.

I'm a begginer on working with canvas, but if somebody can give me an example how to do this I will greatly apreciate it.

here's the image rotate plugin: http://wilq32.adobeair.pl/jQueryRotate/Wilq32.jQueryRotate.html

here's made with canvas..(but kind of bad because it leaves trails.don't know why http://jsbin.com/ipeqi3/2)

See http://stackoverflow.com/questions/4697041/rotating-and-moving-an-image-in-a-canvas-element/4697139#4697139 and http://stackoverflow.com/questions/4649836/using-html5-canvas-rotate-image-about-arbitrary-point/4650102#4650102 — Phrogz, Feb 15 '11 at 19:54
Your question is not clear: are you asking for how to make jQuery rotate work, or are you asking for help on general canvas transforms? — Phrogz, Feb 15 '11 at 19:55

score 0 · Accepted Answer · answered Feb 15 '11 at 18:08

This is what I have so far, indeed it rotates the image by changing the point of rotation with translate (not transform, my bad...)

What It DOESN'T do it doesn't create a smooth animation, it's very rough..How can I accomplish that?

Another thing I need is that the background HAS to be transparent

here's my code so far:

<script>
var degree=10;

function docanvas() {
     var canvas = document.getElementById('canvas');
var cContext = canvas.getContext('2d');

 var img = new Image();   
  // Create new Image object     
  img.src = 'http://www.gravatar.com/avatar/e555bd971bc2f4910893cd5b785c30ff?s=128&d=identicon&r=PG'; // Set source path // set img src 


var cw = img.width, ch = img.height, cx = 0, cy = 0;


canvas.setAttribute('width', 300);
canvas.setAttribute('height', 300);

cContext.fillStyle = "rgba(0, 0, 255, .5)";
cContext.fillRect(0, 0, 300, 300);

cContext.translate(150, 150);


cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, -64, -128,128,128);

    degree+=5;

}
</script>


</head>
<body onload="setInterval('docanvas()',50);">
<canvas id="canvas"></canvas>
<script>
       docanvas(30);
</script>       
</body>
</html>

jquery rotate: changing the point of rotation possible? (transform canvas function)

1 Answers1