Как нарисовать наклонный прямоугольник в Html 5 Canvas?

Question

Допустим, у меня есть x, y, ширина и высота. Мне нужно нарисовать наклонный / наклонный прямоугольник под определенным углом. Я не могу использовать context.rotate. Потому что это меняет другие формы холста.

Answer 1

Вы можете использовать context.rotate, вам просто нужно отменить вращение, прежде чем рисовать другие фигуры. Как это :

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.rect(88, 50, 200, 100);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

context.rotate(0.5);
context.beginPath();
context.rect(138, 120, 200, 100);
context.fillStyle = "#FE8E9D";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();

context.rotate(-0.5);
context.beginPath();
context.rect(188, 190, 200, 100);
context.fillStyle = "#FEEF8E";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();