canvas中的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