canvas提供两种输出文本的方式：

strokeText：描边文本

fillText：填充文本

fillStyle配合fillText使用，strokeStyle配合strokeText使用

strokeText用法：

cxt.strokeText( text， x,  y, [maxwidth] )

text：需要输出的文本内容

x：最左边的文本输出的横坐标位置

y：最左边的文本的 左下角的纵坐标

maxWidth：这个是可选参数，意思就是文本最多能占用maxWidth这么宽，如果文本的实际宽度比maxWidth宽，就会有一种压缩(被挤扁)的效果。

body {

background: #000;

}

#canvas{

background:white;

}

window.onload = function(){

var oCanvas = document.querySelector( "#canvas" ),

oGc = oCanvas.getContext( '2d' ),

text = '跟着ghostwu学习canvas';

oGc.font = 'bold 30px 微软雅黑';

oGc.strokeStyle = '#09f';

oGc.strokeText( text, 100, 100 );

oGc.strokeText( text, 100, 200, 200 );

}

fillText：填充文本，参数跟strokeText一样

text = '跟着ghostwu学习canvas';

oGc.font = 'bold 30px 微软雅黑';

oGc.fillStyle = '#09f';

oGc.fillText( text, 100, 100 );

oGc.fillText( text, 100, 200, 200 );

measureText：获取文本的宽度(长度)，它返回的是一个对象，对象有一个属性width，就是文本的长度了.

cxt.measureText( text ).width

输出一段水平居中的文本

body {

background: #000;

}

#canvas{

background:white;

}

window.onload = function(){

var oCanvas = document.querySelector( "#canvas" ),

oGc = oCanvas.getContext( '2d' ),

width = oCanvas.width,

text = '跟着ghostwu学习canvas';

oGc.font = 'bold 30px 微软雅黑';

oGc.fillStyle = '#09f';

oGc.fillText( text, ( width - oGc.measureText( text ).width ) / 2, 100 );

}

font属性跟css是一样的用法

cxt.font = "font-style font-weight font-size/line-height font-family"

textAlign：文本水平对齐方式

cxt.textAlign = 'start/end/left/right/center';

start跟left差不多，end跟right差不多.

body {

background: #000;

}

#canvas{

background:white;

}

window.onload = function(){

var oCanvas = document.querySelector( "#canvas" ),

oGc = oCanvas.getContext( '2d' ),

width = oCanvas.width,

height = oCanvas.height,

text = '跟着ghostwu学习canvas';

oGc.font = 'bold 16px 微软雅黑';

oGc.fillStyle = '#09f';

var xPos = ( width ) / 2;

oGc.moveTo( xPos, 0 );

oGc.lineTo( xPos, height );

oGc.stroke();

oGc.textAlign = 'start';

oGc.fillText( text, 300, 30 );

oGc.textAlign = 'left';

oGc.fillText( text, 300, 60 );

oGc.textAlign = 'right';

oGc.fillText( text, 300, 90 );

oGc.textAlign = 'end';

oGc.fillText( text, 300, 120 );

oGc.textAlign = 'center';

oGc.fillText( text, 300, 150 );

}

textBaseline：设置文本垂直方向的对齐方式

cxt.textBaseline = '属性值'

常见的属性值: alphabetic, top, middle, bottom等

跟上面的textAlign的用法差不多，这个不是很常用

[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

[js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

[js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标

有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...

随机推荐

1022. Digital Library (30)

A Digital Library contains millions of books, stored according to their titles, authors, key words o ...

day7----面向对象编程进阶

本节内容: 面向对象高级语法部分 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 Socket开发基础 静态方法 它与类唯一的关联就是需要通过类名来调用这个方法 #静态方法实际跟类没关系,不 ...

mybatis系列-07-输出映射

7.1     resultType 使用resultType进行输出映射,只有查询出来的列名和pojo中的属性名一致,该列才可以映射成功. 如果查询出来的列名和pojo中的属性名全部不一致,没有创建 ...

JSON 日期格式带 T 问题

var iso = new IsoDateTimeConverter(); iso.DateTimeFormat = "yyyy-MM-dd"; object obj = new  ...

JavaScript是如何面向对象的

一.引言 在16年的10月份,在校内双选会找前端实习的时候,hr问了一个问题:JavaScript的面向对象理解吗?我张口就说"JavaScript是基于原型的!".然后就没什么好 ...

Struts2之数据标签(二)

Struts2之数据标签(一):http://blog.csdn.net/u012561176/article/details/46848817 1.action标签:使用此标签能够同意在JSP页面中 ...

Hibernate与MyBatis的对比

Hibernate与MyBatis的对比总结,希望大家指出不对之处. 第一章 Hibernate与MyBatis Hibernate 是当前最流行的O/R mapping框架,它出身于sf.net,现 ...

PHP:第一章——PHP中的数组运算符和类运算符

数组运算符: $a+$b;//$a和$b的联合 $a == $b;//比较$a与$b的值相同为true; $a === $b;//如果$a与$b的值与顺讯完全相同为true; $a !=$b;//如果 ...

C++ 泛型 编写的 数据结构 栈

平时编程里经常需要用到数据结构,比如  栈和队列 等,  为了避免每次用到都需要重新编写的麻烦现将  C++ 编写的 数据结构   栈   记录下来,以备后用. 将 数据结构  栈   用头文件的形式 ...