Как можно вращать изображение вокруг себя, используя Canvas?
-
06-07-2019 - |
Вопрос
У меня проблемы с вращением изображения вокруг себя с помощью Canvas.
Так как вы не можете повернуть изображение, вы должны повернуть холст: если я поверну холст на степень, изменится источник, вокруг которого я хочу повернуть. Я не понимаю, как отследить это изменение.
Это мой текущий код: http://pastie.org/669023
Демонстрация находится по адресу http://preview.netlashproject.be/cog/ р>
Если вы хотите что-то сделать, архив с изображением и изображение находятся по адресу http: / /preview.netlashproject.be/cog/cog.zip р>
Решение
Я исправил твой код:
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();
}
Здесь важно то, что перед поворотом изображения вы должны сначала перевести изображение в исходное положение, а затем перевести обратно!
Другие советы
похоже, вы могли бы использовать это: http://wilq32.googlepages.com/ wilq32.rollimage222 р>
Вот пример этого: http://www.antiyes.com/test/index .php р>