接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续.

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

strokeText：描边文本

fillText：填充文本

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

strokeText用法：

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

text：需要输出的文本内容

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

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

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

 <meta charset='utf-8' />

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 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 );

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

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

输出一段水平居中的文本

 <meta charset='utf-8' />

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 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 );

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

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差不多.

 <meta charset='utf-8' />

 <style>

 body {

     background: #000;

 }

 #canvas{

     background:white;

 }

 </style>

 <script>

 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 );

 }

 </script>

 </head>

 <body>

 <canvas id="canvas" width="600" height="300"></canvas>

 </body>

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

cxt.textBaseline = '属性值'

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

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

[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. expander graph&random walk的一个小应用

    此文主要总结的是一种随机算法,旨在判断一个expander图上两点是否连通.复杂度O(logn).算法思路清奇. expander graph博大精深,如果对expander graph的生成,fam ...

  2. summernote使用心得

    今日因项目需要所以使用了很有名气的富文本编辑器summernote,分享使用方法如下!填了一点坑,提供给需要的朋友借鉴! 直接转入我的前端网 地址: http://www.qdfuns.com/not ...

  3. ASP.NET Core 运行原理解剖[3]:Middleware-请求管道的构成

    在 ASP.NET 中,我们知道,它有一个面向切面的请求管道,有19个主要的事件构成,能够让我们进行灵活的扩展.通常是在 web.config 中通过注册 HttpModule 来实现对请求管道事件监 ...

  4. Html5笔记之第六天

    Canvas元素 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形. 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. <c ...

  5. 一步步带你做vue后台管理框架(一)——介绍框架

    系列教程<一步步带你做vue后台管理框架>第一课 github地址:vue-framework-wz 线上体验地址:立即体验 在如今的科技公司中有很多前端的需求都是要写一个类似于后台管理框 ...

  6. JavaScript--我发现！原来你是这样的JS（1）

    一.前言: 前段时间看红宝书(JavaScript高级程序设计),但没有计划的去看,也没有做详细的笔记,读了之后有点空虚,感觉不对劲啊,学的东西很难记住,印象不深啊,有种挫败感,作前端的js都学不好怎 ...

  7. Web桌面应用框架2：著名的WEB桌面应用分析

    前一篇文章里,分析了包括NW.js和electron这种纯JS框架在内的几种Web桌面应用开发方式,实际上还有一种最古老的方式,那就是嵌入WebView的方式. 嵌入WebView的方式和整个程序都是 ...

  8. html标签缺省(自带)样式大全

    html标签默认样式整理 作者:佚名  来源:互联网 时间:07-30 16:54:48 文为大家整理了html标签默认样式属性及浏览器默认样式等等,喜欢css布局的朋友们可以学下,希望对大家有所帮助 ...

  9. Java课程设计——博客作业教学数据分析系统（201521123084 林正晟）

    #课程设计--博客作业教学数据分析系统(201521123084 林正晟) 1.团队课程设计博客链接 博客作业教学数据分析系统 2.个人负责模块或任务说明 学生登陆界面的前端实现和与数据库的连接 学生 ...

  10. 个人作业-2 必应词典安卓APP分析

    产品: 必应词典 安卓版 第一部分:调研,评测 1.对于这款app的第一印象就是界面不是很美观,页面排版十分混乱,有些功能比较鸡肋,功能也不是很丰富,不过这款app的ui设计相对简洁,让人容易上手,对 ...