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

Question

我正在尝试在sqlare上将文本旋转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);

的jsfiddle

Answer 1

您要先绘制文本，然后绘制矩形，然后再想知道为什么文本在矩形后面？

首先，您只需要一次getContext ，而不是两次。

其次，以正确的顺序绘制事物：首先是背景，然后是前景。

Answer 2

您似乎对画布上下文的工作方式有误解。

您会看到，您只需要一个context实例，然后可以使用该实例创建所有形状，路径，甚至在画布上编写文本。

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

考虑到这一点，我创建了一个新的JSFiddle ，您可以在其中找到执行此操作的正确方法。

HTML

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

JavaScript的

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

如您所见，我们仅获取上下文的一个实例，然后从那里进行绘制。

上下文save()和restore()函数有助于防止旋转影响文本。 您也可以沿相反方向旋转相同的量。

希望能帮助到你！