HTML 5 Поворот изображения внутри холста

0

Мне нужно повернуть изображение внутри холста. Я нашел googled и увидел похожие вопросы в stackoverflow.What, что я узнал, это

  1. Я не могу повернуть один объект внутри холста.

  2. Я могу вращать только весь холст.

  3. Поэтому мне нужно перевести в центр объекта, а затем повернуть холст.

Я следил за точно такими же материалами, но меня поразило перевод в центр изображения. Ниже приводится код, который я использую. Вот 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 внутри холста

  • 0
    DrawX и drawY героя должны быть обновлены до новой системы координат холста, если вы хотите, чтобы он был в середине холста, он должен быть 0,0.
  • 0
    Примерно так: jsfiddle.net/J6Pfa/3
Показать ещё 1 комментарий
Теги:
canvas

2 ответа

0
Лучший ответ

Hero drawX и drawY необходимо обновить до новой системы координат холста, если вы хотите, чтобы она находилась в середине холста, она должна быть 0,0.

Что-то вроде этого: jsfiddle.net/J6Pfa/3

0

Хм, я точно не понимаю, чего вы хотите достичь, изображение, движущееся по кругу? или иметь изображение в одном месте, и просто повернуть его?

  • 0
    изображение в одном месте и просто поверните его
  • 1
    Вы должны сделать это по html5? Я полагаю, что проще использовать Solutuin css3. Это пример скрипки при наведении. Я не знаю, нужно ли это всегда вращать или нет, однако этот код можно использовать для чего угодно
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню