使用Canvas标记图形轴

Question

我现在在画布上有一张漂亮的图表，但我正在用labeling my axes撞墙。

我无法找到有关如何在画布中放置/写入文本的信息。该图表基于所有内容的大小，因此我无法预设所有内容或仅使用背景图像。

我需要两种不同的方式来放置文本：

1. 在位置（x，y）右对齐，以便左侧的标签 与图形边界对齐。
2. 以我位置底部标签的位置（x，y）为中心 图表以及图表上写的一些数据点。

那么，我如何在画布上绘制文字？或者我走错了方向，需要将文本放在单独的块元素中并将它们绝对置于CSS中？

Answer 1

您应该将textAlign设置为值right和textBaseline设置为值middle。

Answer 2

我最终使用了fillText()命令。

context.fillStyle = "#444444"; // set color
context.font = "normal normal 14px Helvetica"; // set font weight, size, etc
context.textBaseline = "middle"; // how to align the text vertically
context.textAlign = "end"; // how to align the text horizontally
context.fillText("test1", 50, 50); // text, x, y

对于居中的文字，只需将textAlign更改为“中心”。