How can I rotate an image around me using Canvas?

I'm having trouble translating the image around me using Canvas.

Since you cannot rotate the image, you need to rotate the canvas: if I rotate the canvas by a certain degree of origin around which I want to rotate the changes. I do not understand how to track this change.

This is my current code: http://pastie.org/669023

And the demo is at http://preview.netlashproject.be/cog/

If you want to do something, the encrypted code and image are at http://preview.netlashproject.be/cog/cog.zip

+3
source share
2 answers

:

var rotation = 0;
function draw(){

  var ctx = document.getElementById('myCanvas').getContext('2d');
  ctx.globalCompositeOperation = 'destination-over';

  ctx.save();
  ctx.clearRect(0,0,200,200);
  ctx.translate(100,100); // to get it in the origin
  rotation +=1;
  ctx.rotate(rotation*Math.PI/64); //rotate in origin
  ctx.translate(-100,-100); //put it back
  ctx.drawImage(cog,0,0);
  ctx.restore();
}

, , !

+11

Source: https://habr.com/ru/post/1721020/


All Articles