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()函數有助於防止旋轉影響文本。 您也可以沿相反方向旋轉相同的量。

希望能幫助到你！