My<cod/>.net
Как использовать rotate в canvas HTML5?
Просмотров: 424
Ответов: 5
Как правильно применять JS метод rotate для элемента canvas в HTML5?
Если я просто делаю context.rotate(0.05) то изображение начинает съезжать по какойто странной траектории.
Задача простая: повернуть вокруг своей оси на 60 градусов объект canvas.
Приведите пример.
UPD: Что в этом коде не так?
function html5(){
// экспериминирую с canvas HTML5
ctx.beginPath()
ctx.arc(110, 113, 105, 0, Math.PI);
ctx.lineWidth = 10;
ctx.strokeStyle = '#000';
ctx.rotate(2); // < — переаворачиваем, тут явно нужно что-то еще добавить…
ctx.stroke();
ctx.closePath();
}
В топике, что вам дали выше есть целый абзац про это:
Если мы хотим вращать какой-то объект, например, картинку, необходимо правильно взаимодействовать методами rotate и translate, иначе мы никогда не попадём картинкой в нужное место. Самый простой способ осью вращения выбрать центр картинки и отрисовывать её в координаты (-width/2, -height/2). К примеру, мы хотим развернуть картинку размерами 50х50, находящуюся на координатах 100:100. Указываем translate в координату 125:125 и отрисовываем картинку в координату -25:-25. Альтернатива — использовать LibCanvas и метод rotatedImage(или drawImage в ближайшем будущем) и не напрягаться.
При помощи LibCanvas, который можно скачать с GitHub это будет выглядеть как-то так:
canvas
.getContext('2d-libcanvas')
.drawImage({
image: yourCanvas,
from : [15, 40],
angle: (60).degree()
});
Если использовать расширение Number.prototype.degree из топика, то ваш код может выглядеть так:
function rotatedDrawImage (ctx, image, fromX, fromY, angle) {
ctx.save();
ctx.translate(fromX + image.width / 2, fromY + image.height / 2);
ctx.rotate(angle.degree());
ctx.translate(-(fromX + image.width / 2), -(fromY + image.height / 2));
ctx.drawImage(image, fromX, fromY);
ctx.restore();
}
rotatedDrawImage(canvas.getContext('2d'), yourCanvas, 15, 40, 60);
canvas
.getContext('2d-libcanvas')
.drawImage({
image: yourCanvas,
from : [15, 40],
angle: (60).degree()
});
function rotatedDrawImage (ctx, image, fromX, fromY, angle) {
ctx.save();
ctx.translate(fromX + image.width / 2, fromY + image.height / 2);
ctx.rotate(angle.degree());
ctx.translate(-(fromX + image.width / 2), -(fromY + image.height / 2));
ctx.drawImage(image, fromX, fromY);
ctx.restore();
}
rotatedDrawImage(canvas.getContext('2d'), yourCanvas, 15, 40, 60);