jquery rotate: changing the point of rotation possible? (transform canvas function)_问答_开发者

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

开发者 https://www.devze.com 2023-02-10 11:18 出处：网络

I\'m trying to do 开发者_运维百科an amimation by rotating an image with the jquery roate plugin.

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)

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>