Как просто повернуть изображение в Javascript?

Я работаю над программой в Javascript, пока я пытался повернуть свое изображение, которое я нарисовал. Я попытался найти в Google, чтобы найти свой ответ, но все, что у меня было, это то, как вращать весь холст. То, что я ищу, - это способ повернуть только изображение (подумайте так: я хочу повернуть воина в зависимости от того, в каком направлении он идет). Я пробовал много разных кодов, но все пошло на то же, вращайте весь холст.Как просто повернуть изображение в Javascript?

Вот пример того, что я использовал:

ctx.rotate(20*Math.PI/180);

, а также:

var angle = 0; //init angle 
images[0].onload = function() { 
    ctx.drawImage(images[0], 0, 0); 
    setInterval(function() { 
     ctx.save(); 
     ctx.clearRect(-ctx.canvas.width/2, -ctx.canvas.height/2, ctx.canvas.width, ctx.canvas.height); 
     ctx.rotate(Math.PI/180 * (angle += 10)); //rotating at 10 degrees interval.. 
     ctx.drawImage(images[0], 0, 0); 
     ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2); 
     ctx.restore(); 
    }, 16); 
}

пожалуйста, помогите мне

источник

2013-04-27 Robin Andersson

Попробуйте этот плагин JQuery, но большие примеры: http://code.google.com/p/jqueryrotate/wiki/Examples – Elyor

Проблема в том, я получит новую проблему. Как вызвать функцию в файле JQuery из файла JavaScript? –

Как и этот вызов js to jq object-> http://stackoverflow.com/questions/9489779/javascript-dom-object-to-jquery-object, для exp: 'var jsObj = document.getElementByTageName (" title "); var jqObj = $ (jsObj) .html(); $ (jsObj) .html ("jQuery Test"); ' – Elyor

Вращающийся холста является частью того, как создать вращение относительно изображения.
Чтобы сохранить видимое положение изображения одинаково, а не перемещать его, вы должны сначала центрировать его.
Без центрирования изображения вы получите только визуальный эффект вращения всего холст.
Вам нужно немного вычислить математику, чтобы заставить ее вращаться вокруг центра изображения.

ctx.save(); 
ctx.translate(x, y); /*X and Y of the image, center point of the image */ 
ctx.rotate((Math.PI/180) * rotation); /*rotation is in degrees, so this converts it to rads */ 
ctx.drawImage(img, -(img.width/2), -(img.height/2)); /* Draw and center the image */ 
ctx.restore();

источник

2014-10-07 00:33:22

Как просто повернуть изображение в Javascript?

ответ

Смежные вопросы