HTML5字母列

Question

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

Answer 1

您需要执行的步骤如下：

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

实施例

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请注意，font-height与字体大小不同，所以要好好猜测它（TextMetics假设实现了这个（提升+下降），但并不是所有的浏览器都存在）。