Нанесение изображения на холст под углом БЕЗ поворота холста

Question

Я рисую изображение в HTML 5, используя canvas в JavaScript.Мне нужно нарисовать его под повернутым углом.Я знаю, что это можно сделать, применив функцию поворота (угол), используя контекст холста.Но мне нужно сделать это без вращения самого холста .

Пожалуйста, предложите возможный подход для этого, если это возможно.

Answer 1

На самом деле вы можете нарисовать все, что вы хотите повернуть, в закадровый холст и нарисовать это на своем основном холсте. Я заимствовал этот код из Google IO Talk:

rotateAndCache = function(image,angle) {
  var offscreenCanvas = document.createElement('canvas');
  var offscreenCtx = offscreenCanvas.getContext('2d');

  var size = Math.max(image.width, image.height);
  offscreenCanvas.width = size;
  offscreenCanvas.height = size;

  offscreenCtx.translate(size/2, size/2);
  offscreenCtx.rotate(angle + Math.PI/2);
  offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2));

  return offscreenCanvas;
}

затем кэшируйте его с помощью:

rotobj = rotateAndCache(myimg,myangle)

и в вашем коде:

mycontext.drawImage(rotobj,x_coord,y_coord)

Это полезно, только если у вас есть объект, который повернут на угол только один раз и впоследствии подвергается только преобразованиям.

Answer 2

Когда вы применяете преобразование к холсту, вы не поворачиваете холст. Вы просто говорите, что все, что вы собираетесь нарисовать, будут преобразованы особым образом. Если вы хотите избежать преобразования, влияющего на другие команды, используйте методы save() и restore(). Они позволяют сохранять и восстанавливать настройки холста.

ctx.save();
ctx.rotate(30);
ctx.drawImage();
ctx.restore();

Answer 3

Я проголосовал за @ PeterT - отличный фрагмент и работает хорошо - спасибо за это! Я должен был сделать 3 небольших изменения, чтобы заставить это работать на меня:

1. максимум ширины и высоты недостаточен: если вы думаете о вращении квадрата, вам нужен круг, диаметр которого равен диагонали квадрата (var diam).
2. холст необходимо перевести обратно (или использовать сохранить / восстановить).
3. координаты объекта х и у должны быть скорректированы с учетом размера холста.

Итак, я закончил с:

    rotateAndCache = function(image,angle) {
        var offscreenCanvas = document.createElement('canvas');
        var offscreenCtx = offscreenCanvas.getContext('2d');

        var size = Math.max(image.width, image.height);
        var diam = 2*((size/2)*Math.sqrt(2));                 // needs to be saved
        offscreenCanvas.width = diam;
        offscreenCanvas.height = diam;

        offscreenCtx.translate(diam/2, diam/2);
        offscreenCtx.rotate(angle);
        offscreenCtx.drawImage(image, -(image.width/2), -(image.height/2));
        offscreenCtx.translate(-diam/2, -diam/2);

        return offscreenCanvas;
}

И откорректированная позиция прорисовки (необходимо сохранить в rotateAndCache):
mycontext.drawImage(rotobj,x-(diam-width)/2,y-(diam-height)/2);

Answer 4

Это невозможно, и вам, вероятно, это не нужно.Попробуйте это:

context.save() // Save current state (includes transformations)
context.rotate()
... draw image ...
context.restore() // Restore state