HTML5 Canvas中绘制文本

绘制文本

画布中不仅可以绘制图形，还可以绘制文本。绘制文本，既可以使用填充方法，也可以使用勾勒方法：

fillText(text, x, y, [maxWidth])
strokeText(text, x, y, [maxWidth])

表示在(x,y)的位置，绘制text的内容。可选参数maxWidth为文本的最大宽度，单位为像素。如果设置了该属性，当文本内容宽度超过该参数值，则会自动按比例缩小字体，使文本的内容全部可见；未超过时，则以实际宽度显示。如果未设置该属性，当文本内容宽度超过画布宽度时，超出的内容将被隐藏。

为保证文本在各浏览器下显示一致，需要设置文本的样式属性，可设置的属性见表 4‑1：

表 4‑1 文本的样式属性
属性	描述
font	文本字体，可设置字体样式的任何值，如font style，font weight，font size，font face等，该属性的值是CSS3字体字符串
textAlign	文本参照X轴坐标如何进行水平对齐。取值：start， end，left，right，center，默认值为start
textBaseline	文本参照Y轴坐标如何进行垂直对齐。取值：top，middle，alphabetic，ideographic，bottom，默认值：alphabetic

下图展示了textAlign和textBaseline这两个属性的可能值，每个文本字符串下面的细线就是基线（baseline），小方框标记了绘制文本时的坐标（x，y）。

调用一次fillText()或strokeText()方法，只能绘制一行文本，如果要绘制多行文本，需要调用多次。

context.font = 'bold 35px Arial';
context.textAlign = 'center';
context.textBaseline = 'bottom';
context.fillStyle = '#ccc';
context.strokeText("Hello Canvas", 150, 100);
context.fillText("Hello Canvas", 180, 140);

font属性定义绘制文本所使用的字体，其值是一个字符串，语法跟CSS的font属性一致。上述代码的运行结果如图 4‑14 所示：

图4-14 绘制文本

跟绘制图形一样，在对文本进行填充或描边时，除了使用纯色，也可以使用渐变或图案。

说明：

textAlign属性定义的是x坐标点的位置，假设其值为"center"，则x坐标点就在文本的中心点的位置，其值为"left"，则x坐标点就在文本的最左边的位置。对于从左到右的文本而言，"start"和"left"是等价的，"end"和"right"是等价的；对于从右到左的文本而言，"start"和"right "是等价的，"end"和"left "是等价的。可以通过<vanvas>元素的dir属性来设置文本的方向，“rtl”（right-to-left）表示从右到左，“ltr”（ left-to-right）表示从左到右。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

HTML5 Canvas中绘制文本相关推荐

html绘图环境,HTML_HTML5 在canvas中绘制文本附效果图，一、绘制文本在绘图环境中提 - phpStudy...
HTML5 在canvas中绘制文本附效果图一.绘制文本在绘图环境中提供了两种方法在canvas中绘制文本. strokeText(text,x,y) : 在(x,y)处绘制空心的文本. fill ...
HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
html如何画出四个圆圈,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
HTML5 Canvas中绘制贝塞尔曲线
绘制贝塞尔曲线贝塞尔曲线于1959年,由法国物理学家与数学家Paul de Casteljau所发明,于1962年,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,并用于汽车的车 ...
HTML5 Canvas中绘制圆弧
绘制圆弧圆弧被定义为假想的圆周上任意两点之间的部分.Canvas的API提供了两个绘制圆弧的方法:arc()和arcTo()方法. arc()方法使用arc()方法绘制圆弧时,假想的圆由圆心和半径 ...
HTML5 Canvas中绘制矩形
绘制矩形上一节,我们使用lineTo()方法绘制一个封闭的矩形.其实,canvas的API提供了rect()方法可以绘制矩形.rect()方法是路径方法,它会把指定的矩形添加到当前路径的子路径中.它 ...
HTML5 Canvas中绘制线段
绘制线段调用lineTo()方法绘制线段.lineTo(x, y)方法把当前点和lineTo()方法指定的点(x, y)用线段连接起来. 如果要绘制多条线段,可以重复调用该方法.第一次调用,当前点为 ...

HTML5 Canvas中绘制文本

绘制文本

HTML5 Canvas中绘制文本相关推荐

最新文章

热门文章