Javascript HTML5画布-旋转矩形上的文本

我正在尝试将文本放置在旋转45度的位置。问题是我的文本在矩形下。我可以改变文本的位置吗

我的代码是

var c = document.getElementById("myCanvas");
var square= c.getContext("2d");
var text= c.getContext("2d");

text.fillStyle = "red";
text.fillText("1", 40, 50);
text.fillStyle = "#000000";

square.rotate(Math.PI / 4);
square.fillRect(50, 0, 50, 50);

---

您先画文本，然后画矩形，然后想知道为什么文本在矩形后面

首先，您只需要

getContext

一次，而不是两次

---

第二，按照正确的顺序画东西：先画背景，然后画前景。

看来你可能对画布上下文的工作方式有误解

你看，你只需要一个上下文实例，然后你就可以用它来创建你所有的形状，路径，甚至在画布上写文本

此外，您正在矩形前绘制文本，这将覆盖它

考虑到这一点，我创建了一个新的应用程序，您可以在其中查看正确的方法

HTML 正如你所看到的，我们只取了一个上下文实例，然后从中得出结论

上下文

save（）

和

restore（）

函数有助于防止旋转影响文本。您也可以在相反方向上旋转相同的量

---

希望有帮助

如果我将矩形放在文本之前，我将使文本旋转。是否可以防止文本旋转？保存并恢复上下文，就像您应该做的那样：p

<canvas id="myCanvas" width="300" height="150">
  Your browser does not support the HTML5 canvas tag.
</canvas>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); //we get the canvas context

ctx.save(); //save context properties

ctx.rotate(Math.PI / 4);
ctx.fillRect(50, 0, 50, 50);

ctx.restore(); //restore saved properties

ctx.fillStyle = "red";
ctx.fillText("1", 40, 50);