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

Question

У меня есть холст, на котором я нарисовал серию изображений, которые можно перетаскивать, каждое изображение - это отдельная сущность.

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

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

Большое спасибо!

Answer 1

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

var canvas = document.getElementById('test_canvas');
var ctx = canvas.getContext('2d');

var buffer = document.createElement('canvas');
buffer.width = buffer.height = 60;
var bctx = buffer.getContext('2d');
bctx.translate(30, 30);
bctx.rotate(0.5);
bctx.fillStyle = 'rgb(255, 0, 0)';
bctx.fillRect(-15, -15, 30, 30);

ctx.fillStyle = 'rgb(0, 255, 0)';
ctx.fillRect(30, 30, 30, 30);
ctx.drawImage(buffer, 50, 50);

Вы можете проверить этот код в JSFiddle, который я настроил - http://jsfiddle.net/dzenkovich/UdaUA/2/

Обратите внимание, что вам нужно внимательно следить за точкой поворота и размером холста буфера, чтобы это работало. Для получения дополнительной информации проверьте эту статью я нашел http://creativejs.com/2012/01/day-10-drawing-rotated-images-into-canvas/

Answer 2

Да, вы можете, но это не так просто, как установить атрибут вращения. Как работает холст, вы не можете вращать отдельные элементы, а только весь холст.

Чтобы повернуть один элемент, вам нужно повернуть холст, поместить элемент, а затем повернуть холст обратно в исходное положение.

В этом вопросе есть несколько примеров: Как повернуть один объект на холсте html 5?