javascript - 画布中的 textBaseline 是如何工作的？

Question

我有这个简单的代码：http ://codepen.io/hypertornado/pen/rIbsH在画布上绘制了两行文本。怎么可能，顶部画布边框和第一行的第一个字母 (█) 之间有一个空白空间，而每行的第一个字母之间没有空白空间？

canvas = window.document.getElementById("canvas")
context = canvas.getContext('2d')
context.fillStyle = "rgba(100,150, 0,1)"
context.textBaseline = 'alphabetic'
context.font = "30px Arial"
context.fillText("█hello", 0, 30)
context.fillText("█hello", 0, 60)

在 Mac OS X 上的 Google Chrome 上测试。

Answer 1

尝试将 textBaseline 更改为底部

context.textBaseline = 'bottom'

更多信息在这里：

https://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas