javascript - 旋转 HTML 画布文本

Question

我有一个矩形，其边缘标记为 150

如何旋转文本“150”以从下到上阅读。下面的代码使 150 沿边缘从上到下看。

预期高于

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

const x = 150;
const y = 150;
const w = 200;
const h = 150;

ctx.fillStyle = "gray";
ctx.fillRect(x + 0.5, y + 0.5, w, h);
ctx.font = "12px Comic Sans MS";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("Rectangle", x + w / 2, y + h / 2);

ctx.fillText('200', x + w / 2, y + h - 5);
ctx.save();
ctx.translate(x + w, y + h / 2);

ctx.rotate(90 * Math.PI / 180);

ctx.fillText('150', 0, 0 + w - 5);
ctx.restore();

<canvas id="myCanvas" width="400" height="300"></canvas>

标签： javascripthtmlcanvas

Answer 1

注意负平移和负旋转。

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

const x = 150;
const y = 150;
const w = 200;
const h = 150;

ctx.fillStyle = "gray";
ctx.fillRect(x + 0.5, y + 0.5, w, h);
ctx.font = "12px Comic Sans MS";
ctx.fillStyle = "black";
ctx.textAlign = "center";
ctx.fillText("Rectangle", x + w / 2, y + h / 2);

ctx.fillText('200', x + w / 2, y + h - 5);
ctx.save();

ctx.translate(x - w, y + h / 2);
ctx.rotate(-90 * Math.PI / 180);

ctx.fillText('150', 0, w + 15); /* 15 is width of the text itself */
ctx.restore();

<canvas id="myCanvas" width="400" height="300"></canvas>