如何在Html 5 Canvas中绘制倾斜矩形？

Question

假设我有x，y，宽度和高度。我需要以特定的角度绘制倾斜/倾斜的矩形。我不能使用context.rotate。因为它正在改变其他形状的画布。

Answer 1

您可以使用context.rotate，只需在绘制其他形状之前撤消旋转。 Like this：

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();