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

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

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

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

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

希望它有所帮助！

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

2 个答案:

HTML

的JavaScript