在画布中为旋转的图像设置动画

Question

hey guys i have a function that strokes a line based on the angle received from the user and also moves an image using some basic maths. the only problem is i am unable to rotate image based on that angle as if i put this inside animation frame loop it doesn't work .please help

function move() 
{

var theCanvas=document.getElementById("canvas1");
var context=theCanvas.getContext("2d");
context.clearRect(0, 0, theCanvas.width,  theCanvas.height );
// context.fillStyle = "#EEEEEE";
 //context.fillRect(0, 0,theCanvas.width,  theCanvas.height );

       context.beginPath();
       context.setLineDash([3,2]);
       context.lineWidth=10;
       context.strokeStyle="black";
       context.moveTo(x1,y1);
       context.lineTo(x2,y2);
       context.stroke();

    context.drawImage(srcImg,x1+x_fact,y1-100+y_fact);
    x_fact=x_fact+0.5;      
    y_fact=m*x_fact+c;
    requestAnimationFrame(move);
}
move(); 

now please suggest me a way to rotate the image on the angle input only once so it can face according to the path and move in it.

thank you in advance.

Answer 1

If you want to rotate the image by its corner use something like this:

... your other code here ...

var x = x1+x_fact,                 // for simplicity
    y = y1-100+y_fact;

context.save();                    // save state
context.translate(x, y);           // translate to origin of rotation
context.rotate(angle);             // rotate, provide angle in radians

context.drawImage(srcImg, 0, 0);   // as we are translated we draw at [0,0]
context.restore();                 // restore state removing transforms

If you want to rotate it by center simply translate, rotate and then translate back 50% of the image's width and height.

save/restore are relative expensive operations - you can simply reset transformation all together after each draw if you don't need transformations elsewhere:

context.setTransform(1, 0, 0, 1, 0, 0); // instead of restore(), remove save()