Мне нужно повернуть изображение внутри холста. Я нашел googled и увидел похожие вопросы в stackoverflow.What, что я узнал, это
Я не могу повернуть один объект внутри холста.
Я могу вращать только весь холст.
Поэтому мне нужно перевести в центр объекта, а затем повернуть холст.
Я следил за точно такими же материалами, но меня поразило перевод в центр изображения. Ниже приводится код, который я использую. Вот jsfiddle http://jsfiddle.net/J6Pfa/1/. Это вращение всего холста, независимо от образа. Один из них подсказывает мне, где я ошибаюсь. Спасибо
//hero canvas
ball = new Hero();
var ang = 0;
herocanvas = document.createElement("canvas");
herocanvas.width = herocanvas.width = 500;
herocanvas.height = herocanvas.height = 500;
heroctx = herocanvas.getContext('2d');
document.body.appendChild(herocanvas);
var requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var imgSprite = new Image();
imgSprite.src = 'http://i.imgur.com/WTgOHGg.png';
imgSprite.addEventListener('load',init,false);
function init()
{
startloop();
}
function startloop()
{
heroctx.save(); //saves the state of canvas
clearherobg() ; // clear canvas
heroctx.translate(ball.drawX, ball.drawY); //let translate
heroctx.rotate(Math.PI / 180 * (ang += 4));
ball.draw(); // draw image here
heroctx.restore();
requestAnimFrame(startloop);
}
function Hero() {
this.srcX = 0;
this.srcY = 500;
this.drawX = 220;
this.drawY = 200;
this.width = 100;
this.height = 40;
this.speed = 5;
this.isUpKey = false;
this.isRightKey = false;
this.isDownKey = false;
this.isLeftKey = false;
}
Hero.prototype.draw = function () {
heroctx.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
};
function clearherobg() {
heroctx.clearRect(0,0,500,500);
}
Те, кто не умеет читать полный код. Пожалуйста, проверьте startloop()
, это главный бесконечный цикл. ball.drawX and ball.drawY
- это позиция изображения x и y внутри холста
Hero drawX и drawY необходимо обновить до новой системы координат холста, если вы хотите, чтобы она находилась в середине холста, она должна быть 0,0.
Что-то вроде этого: jsfiddle.net/J6Pfa/3
Хм, я точно не понимаю, чего вы хотите достичь, изображение, движущееся по кругу? или иметь изображение в одном месте, и просто повернуть его?