Javascript 如何在HTML5画布中绘制倾斜矩形？

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

您可以使用

context.rotate

，只需在绘制其他形状之前撤消旋转即可：

---

你能给我看一下代码吗？你可以通过查看页面的源代码（HTML）和链接文件来查看代码。不幸的是，我在画布中有很多对象。我不能改变这个。我只需要旋转一个矩形。context.rotate正在干扰canvas中的所有对象。我知道canvas是如何工作的。但我需要倾斜重新角度的新坐标。我正在检查这个。一个更好的，你认为呢？@user960567我认为如果这些链接表明你的问题的解决方案，那么你的问题就不是你的问题所表明的。

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