canvas JavaScript API学习(三)

写在前面
介绍过一些基本的图形绘制api和比较复杂的贝塞尔曲线的绘制方法,接下来要了解的是如何在canvas里写入文本。为什么要学习这个?canvas跟其他标签不一样!一般的,我们在标签里这样写:

<div>这是一些文字</div>

上面的代码在页面上就可以直接看到我们写的文字,并且可以通过给这个标签添加样式来改变文字的显示效果,但canvas不行,在canvas标签里的文字只有在不支持canvas的浏览器中才会显现出来,一般用来提示该浏览器不支持canvas。这也是该标签独特的地方,决定这点的就是它的设计初衷:绘图。

canvas文字绘制api概述
虽说canvas的主要目的是用来绘图,而且标签里的文字也无法显示出来,但不代表它不支持在canvas绘制的图形中插入文本,只是方法和平常的不一样,文本也被当做图形来处理,因此要插入文本,也需要通过对应的api来绘制。

下面是一些函数原型及相关属性:

context . font [ = value ]
返回当前字体设置,该值是可写的,可用来设置字体。语法与css中的”font”属性一样,无法被解析为css font值的字体将被忽略。

context . textAlign [ = value ]
返回当前文本对齐方式,该值是可写的,可用来改变文本水平对齐方式。可用的值有:start, end, left,right和center,其他值无效, 默认为start。

context . textBaseline [ = value ]
返回当前底线的对齐方式,该值是可写的,可用来改变底线的对齐方式。可用的值有:top,hanging,middle,alphabetic,ideographic,bottom,其他值无效,默认为alphabetic。

context . fillText(text, x, y [, maxWidth ]
context . strokeText(text, x, y [, maxWidth ] )
在指定的位置(坐标值[x,y])分别用fill或stroke方式描绘所给的文本。如果给定maxwidth值,在文本宽度超过该值的时候,文本会被拉伸来适应这个值。

metrics = context . measureText(text)
返回当前字体下所给的文本的度量的一个TextMetrics对象

metrics . width
返回传递给measureText()函数的文本的宽度

canvas文字绘制api解析
在了解了相关的知识后,你可能对前面提到的内容还有些疑问,接下来我来一一演示各个函数与属性的用法。先来看一个最简单的例子:

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title>Canvas javascript api demo</title>
<style type="text/css">
canvas {
	border:1px #000 solid;
}
</style>
 
</head>
<body>
<h1>this is a canvas api test page!</h1>
<canvas id="canvas" width="300" height="300">this browser does not support canvas...</canvas>
<a href="http://blog.wanz.im/2010/04/19/canvas_javascript_api_learning_three/">返回文章</a>
<script type="text/javascript">
var $=function(id){
	return document.getElementById(id);
}
window.onload=function(){
	var ctx=$('canvas').getContext('2d');
	ctx.font="12px sans-serif";
	ctx.fillText("IE你叫我情何以堪呐!", 10, 50);  	
}
</script>
</body>
</html>

这个代码你可以自己测试,我就不给出demo了,虽然代码很简单,但是还是有一个问题需要提醒一下,就是你在设置font值的时候,尽量要把你想要使用的字体,样式,大小,间距等写全,因为这里的设置会覆盖之前的内容。所以,如果你只是想改变字体大小,但是你写的是ctx.font=”12px”,这样是不行的,在Firefox下,字体会变成浏览器默认的字体,大小为12px,而在WebKit浏览器中,这个设置将不会生效,font的值依然是默认值:10px sans-serif。

fillText函数很简单,各个参数的含义见上面的描述,文字的颜色使用的是当前环境的fillStyle值。字体属性由font确定,对齐方式由textAlign指定,底线则是通过textBaseline设置。strokeText与其对应,相应的文字的颜色的设置是strokeStyle,你可以自己对比他们的差别。BTW貌似名字带stroke的相关函数描边的宽度都是2px,如果你看过之前文章里的介绍并做了测试,你就会发现这点,这也是我一直很困惑的一点。

fillText和strokeText的y值也就是纵坐标还有一点更让我疑惑的是文字出现在垂直方向的位置比给定的值少了10px;
 

Texts at the coordinate(10,20)

Texts at the coordinate(10,20)


这里我给定的坐标是(10,20),即:ctx.fillText(texts,10,20); 但实际y方向的位置少了10px

 

对于textAlign的start跟end值你可能会比较陌生,因为这两个值是在css3里才出现的,对齐的结果你可以自己试试比我的文字说明会更清楚点。

textBaseline对应的六个值所呈现的底线样子我想通过一张图就可以清楚的表达了,如下图,点击图片可以查看大图:
 

baselines

baselines

 

measureText返回的是一个TextMetrics对象,该对象目前只有一个只读的属性width,通过该属性就可以得到文本的宽度,单位为px。来看一个demo:

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" />
<title>Canvas javascript api demo</title>
<style type="text/css">
canvas {
	border:1px #000 solid;
}
</style>
 
</head>
<body>
<h1>this is a canvas api test page!</h1>
<canvas id="canvas" width="300" height="300">this browser does not support canvas...</canvas>
<a href="http://blog.wanz.im/2010/04/19/canvas_javascript_api_learning_three/">返回文章</a>
<script type="text/javascript">
var $=function(id){
	return document.getElementById(id);
}
window.onload=function(){
	var ctx=$('canvas').getContext('2d');
	ctx.font="12px sans-serif";
	m=ctx.measureText("IE你叫我情何以堪呐!")
	alert(m.width);  	
}
</script>
</body>
</html>

同样是很纯很天真的代码,但是我在Firefox3.6.3,Chrome5.0.356.2和Safari4.0(530.17)中得到结果分别为:120,120,119;然后我将font的大小改为10px,得到的结果分别为:100,120,100;前一步基础上又将字体改为Arial,得到的结果分别为:100,119,100,最后把大小改为12px,得到的结果为:119,119,119。实在有点汗颜,看来对这个方法的计算方式还有的研究。
 

measureText_in_browers

measureText_in_browers

 

最后一点遗言
对于canvas文本绘制方面的相关函数就介绍到这里,更多内容就靠自己多查找资料多实战了,对于今天学习的东西实在有点出乎我的预料,因为正如文章中提到的那样,还有很多疑惑尚未解决,希望有高手给我释疑啊。最后还是以一个demo来结尾吧!查看demo

原文地址 .canvas JavaScript API学习(三)

XeonWell Studio