HTML5 字母列

Question

我需要将我的字母存储在一个字符串中，并在它们之间留有空格，以形成一个竖直的列，其中的字母仍然是直立的。这需要在 HTML5 Canvas 中完成，我不知道从哪里开始，有什么想法吗？

Answer 1

您需要做的步骤如下：

迭代字符串的每个字符
使用fillText（或strokeText）在你想要的位置绘制字符
增加每个字符的高度。

示例

var ctx = document.querySelector("canvas").getContext("2d"),  // get context of canvas
    str = "H E L L O",
    char, i = 0, len = str.length,
    x = 10, y = 30, height = 24;

ctx.font = "bold 24px sans-serif"; // set a font for text

while(i < len) {
  char = str.substr(i++, 1);       // get a char from string at index i
  ctx.fillText(char, x, y);        // draw to canvas at (x, y)
  y += height;                     // increment y with height
}

<canvas width=50 height=250></canvas>

注意 font-height 和字体大小不一样，所以好好猜测一下（TextMetics 应该实现这个（上升+下降）但不是所有的浏览器都有）。

HTML5 字母列

HTML5 Column of Letters

html

canvas

示例