HTML5字母列[关闭]

Posted 2023-03-05

【中文标题】HTML5字母列[关闭]

【英文标题】：HTML5 Column of Letters [closed]

【发布时间】：2015-05-29 07:19:06

【问题描述】：

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

【问题讨论】：

至少你可以绘制或展示任何你想要的样本。就像“我想要一只羊长得像山羊长得像牛等等”。如果您的问题需要更多时间来理解，那么您如何期望有人帮助您。

@Nepal12 我已经编辑了我的问题，以便为您提供所需的详细信息，希望您再看看。

@GameAlchemist 很抱歉，作为一名学生，自己无法找到答案，所以我转向了这个网站。如果你很擅长这个，请随时留下答案。

提示：context.fillText 绘制文本，它有 2 个必需参数：要绘制文本的 x,y 坐标。掌握了这些知识---继续学习更多关于 html5 画布的信息。

@GameAlchemist 你喝醉了吗？阅读 Optimizing For Pearls, Not Sand（官方 SO 观点关于回答糟糕的问题）。

【参考方案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>

请注意，字体高度与字体大小不同，因此请好好猜测一下（TextMetics 假设实现了这一点（上升+下降），但并非所有浏览器都存在）。

【讨论】：

这只是您的回答的主题，但似乎许多排版师使用黄金比例从字体大小计算行高。这是一篇我发现对修改后的黄金比例计算有用的文章：imarc.net/blog/750-using_the_golden_ratio_with_typography。

@markE 是的，黄金比例在古典和现代中一直很重要，从建筑到印刷。不过，它的大小与高度的历史背景略有不同。过去使用移动字体时，字母所在的盘子是“大小”。字母本身的高度可能会有所不同。这个概念或多或少成功地引入了数字世界（这也是 72.272 dpi 的用武之地）:)

...完全跑题了，我看看你的psd-reader lib——太棒了！