接着上文线条样式[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. 关于原根的存在性及个数（Primitive Root Theorem）

    我在RSA学习总结的第三部分关于Mille-Rabin素数测试的正确性证明里需要用到此定理,由于证明太长,故另开一章于此.(为啥我说话突然文绉绉了Orz,可能是这周辩论打多了) 结论是对素数p,mod ...

  2. linux（十三）之磁盘分区、创建文件系统、挂载

    前面学习了linux的用户管理 ,感觉是不是多lnux的多用户多任务的系统感觉十分了解了,但是其实并不然的.你还需要了解更多.接下来给大家分享的是 在vmware中添加硬盘创建分区,然后挂载到指定目录 ...

  3. zabbix上监控docker

    说明 第一种方案,借助docker的python版的api,然后通过自己封装自定义脚本来做,稍微麻烦点,但是可以达到个人自定义的效果. 第二种借助国外的一位大神已经封装好的模板来做,简单省事情,不过功 ...

  4. JS实现60s倒计时(亲测有效)，及span标签如何使用和禁用onclick事件

    效果如下图:点击按钮出现60秒倒计时,60s内按钮不可用,倒计时到了时间方可再次点击获取. 另外还有一个知识点,只有input 及button这样的表单元素有disbale属性,如何设置是否可用属性的 ...

  5. Java 反射之动态代理

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt205 利用Java反射机制你可以在运行期动态的创建接口的实现.java.la ...

  6. java 静态方法分析

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt210 1.大家都以为"实例方法需要先创建实例才可以调用,比较麻烦, ...

  7. 为何webpack打包后的文件要放在服务器上才能运行

    为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...

  8. tkinter第二章(添加图片，背景图片)

    #插入文件图片import tkinter as tk root = tk.Tk() #创建一个标签类, [justify]:对齐方式textLabel = tk.Label(root,text=&q ...

  9. lua代码的加载

    lua代码的加载 Openresty是什么 OpenResty是一个基于 Nginx 与 Lua 的高性能 Web 平台,通过把lua嵌入到Nginx中,使得我们可以用轻巧的lua语言进行nginx的 ...

  10. 201521123061 《Java程序设计》第六周学习总结

    201521123061 <Java程序设计>第六周学习总结 ***代码阅读:Child压缩包内 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核 ...