在前一个章节中看过 应用样式和颜色 之后, 我们现在来看一下如何在canvas中绘制文本
绘制文本
canvas 提供了两种方法来渲染文本:
fillText(text, x, y [, maxWidth])
- 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.
strokeText(text, x, y [, maxWidth])
- 在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.
一个填充文本的示例
文本用当前的填充方式被填充:
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.fillText("Hello world", 10, 50); }
<canvas id="canvas" width="300" height="100"></canvas>
draw();
一个文本边框的示例
文本用当前的边框样式被绘制:
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.font = "48px serif"; ctx.strokeText("Hello world", 10, 50); }
<canvas id="canvas" width="300" height="100"></canvas>
draw();
有样式的文本
在上面的例子用我们已经使用了 font
来使文本比默认尺寸大一些. 还有更多的属性可以让你改变canvas显示文本的方式:
font = value
- 当前我们用来绘制文本的样式. 这个字符串使用和 CSS
font
属性相同的语法. 默认的字体是10px sans-serif
。 textAlign = value
- 文本对齐选项. 可选的值包括:
start
,end
,left
,right
orcenter
. 默认值是start
。 textBaseline = value
- 基线对齐选项. 可选的值包括:
top
,hanging
,middle
,alphabetic
,ideographic
,bottom
。默认值是alphabetic。
direction = value
- 文本方向。可能的值包括:
ltr
,rtl
,inherit
。默认值是inherit。
如果你之前使用过CSS,那么这些选项你会很熟悉。
下面的图片(from the WHATWG)展示了textBaseline属性支持的不同的基线情况:
textBaseline例子
编辑下面的代码,看看它们在canvas中的变化:
ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world", 0, 100);
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="Edit" /> <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textBaseline = "hanging"; ctx.strokeText("Hello world", 0, 100);</textarea>
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var edit = document.getElementById("edit"); var code = textarea.value; function drawCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addEventListener("click", function() { textarea.value = code; drawCanvas(); }); edit.addEventListener("click", function() { textarea.focus(); }) textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas);
先进的文本测量
当你需要获得更多的文本细节时,下面的方法可以给你测量文本的方法。
measureText()
- 将返回一个
TextMetrics
对象的宽度、所在像素,这些体现文本特性的属性。
下面的代码段将展示如何测量文本来获得它的宽度:
function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var text = ctx.measureText("foo"); // TextMetrics object text.width; // 16; }
Geoko特性说明
在Geoko(Firefox,Firefox OS及基于Mozilla的应用的渲染引擎)中,曾有一些版本较早的 API 实现了在canvas上对文本作画的功能,但它们现在已不再使用。