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

HTML5 canvas - text on rotated rectangle

本文关键字：文本 画布 旋转 HTML5      更新时间：2023-09-26

我正试图将文本放在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

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

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

其次，按照正确的顺序绘制：先绘制背景，然后绘制前景。

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

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

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

考虑到这一点，我创建了一个新的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()函数有助于防止旋转影响文本。您也可以在相反的方向上旋转相同的量。

希望它能有所帮助！

相关文章：