使用HTML5 Canvas API控制字体的显示与渲染的方法


Posted in HTML / CSS onMarch 24, 2016

API简介
今天我们开始征战一个全新的内容——HTML5 Canvas的文本API!要知道,艺术家通常同时也是一个书法家,所以我们要学习写字,而且是写出漂亮的字。是不是很有意思?

好了,先预告一下Canvas 文本API有哪些。

属性 描述
font 设置或返回文本内容的当前字体属性
textAlign 设置或返回文本内容的当前对其方式
textBaseline 设置或返回在绘制文本时使用的当前文本基线

方法 描述
fillText() 在画布上绘制“被填充的”文本
strokeText() 在画布上绘制文本(无填充)
measureText() 返回包含指定文本宽度的对象

看了上面的表格,相信童鞋们以及有了大概的认识。这里,我们先说文本的显示与渲染,用到了font,fillText()与strokeText()。

基本文本显示
在Canvas上使用文本,必须得先知道:Canvas上的文本不能使用CSS样式,虽然font属性与CSS的属性相似,但是却不能够交换使用。

显示文本三步走战略:

1.使用font设置字体。
2.使用fillStyle设置字体颜色。
3.使用fillText()方法显示字体。
这里的font属性可以不指定,如果没有指定字体,则默认自动使用 10px 无衬线体。

下面的代码简单显示了一段文本

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>基本文本显示</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         //1. 使用`font`设置字体。   
  28.         context.font = "50px serif";   
  29.         //2. 使用`fillStyle`设置字体颜色。   
  30.         context.fillStyle = "#00AAAA";   
  31.         //3. 使用`fillText()`方法显示字体。   
  32.         context.fillText("《CANVAS--Draw on the Web》",50,300);   
  33.   
  34.     };   
  35. </script>   
  36. </body>   
  37. </html>  

运行结果:
使用HTML5 Canvas API控制字体的显示与渲染的方法

设置文本字体font
在Canvas中设置字体样式非常的容易,font属性与CSS的设置字体格式是一样的,因此只需通过把与CSS兼容的字符串应用到font属性即可。可以设置字体的样式、字体的变体、字体的粗细、字号和行高、字体外观等。

基本格式如下。

CSS Code复制内容到剪贴板
  1. context.font =    
  2. "[font-style] [font-variant] [font-weight]   
  3. [font-size/line-height] [font-family]"  

以上五个参数均可缺省,各个参数间用逗号隔开。

提示:参数用中括号[]包裹起来表示可以缺省。
下面一一来介绍一下这些参数值的意义。

font-style
font-style 属性定义字体的风格。

描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个斜体的字体样式。

后两者通常情况下看上去是没啥区别的。但是获取倾斜效果的方法并不同。italic是使用字体库中的斜体字,通常一个字体库是拥有该字体的斜体形式和粗体形式。oblique是直接将字倾斜,如果一个字体库没有斜体字那么就不能使用italic,想要获取倾斜字体只能使用oblique。

font-variant
font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。

描述
normal 默认值。浏览器显示一个标准的字体样式。
small-caps 浏览器会显示小型大写字母的字体。

看下面的一张图片就知道这属性啥意思啦。
使用HTML5 Canvas API控制字体的显示与渲染的方法

就是这样,上面一行是使用的默认值normal,下面一行使用的是small-caps。效果就是,原本大写的英文字母不变,小写的英文字母变成大写,但是大小不变。

font-weight
font-weight 属性设置文本的粗细。

描述
normal 默认值。浏览器显示一个标准的字体样式。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100-900之间的值 定义由粗到细的字符。400等同于normal,而700等同于bold。

font-size
font-size 属性可设置字体的尺寸。

描述
xx-samll 最小字体
x-small 较小字体
samll 小字体。
medium 缺省值。
large 大字体。
x-large 较大字体。
xx-large 较大字体。
任意数值 单位px,代表字号值

line-height
line-height 属性设置行间的距离(行高)。不允许使用负值

font-family
font-family 规定元素的字体系列。

使用@font-face自定义字体
HTML5支持常用字体,如果没有可以使用@font-face扩展字体。但是并不建议使用。

@font-face 能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。目前支持加载EOT与TTF文件。

示例:代码过长,略XD
使用HTML5 Canvas API控制字体的显示与渲染的方法

我这里下载的字体库只有A-Z这26个大写英文字母,所以遇到小写的自动转大写,遇到汉字或者数字它指定用星星符号代替。使用了CSS3中的@font-face即可自定义字体,是不是非常的酷。

文本渲染
同绘制矩形一样,这里“绘制”文本也给出了两种方法——fillText()与strokeText()。之所以说一样,因为这两个方法也可以通过fillStyle与strokeStyle设置对应的属性,之前说过的颜色填充、渐变填充、甚至是图案填充都是可以的。

fillText()与strokeText()的参数表是一样的,接受4个参数,分别是String,x,y与maxlen,其中String是指要显示的字符串,之后x与y是指显示的坐标,最后一个maxlen是可以缺省的数值型参数,代表显示的最大宽度,单位是像素。如果文本的长度超过了这个maxlen,Canvas就会将显示文本横向压缩。通常为了保证字体的美观,我们不设置maxlen。

即context.fillText(String,x,y,[maxlen])与context.strokeText(String,x,y,[maxlen])。

下面我们通过一个案例来看看文本渲染的效果。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>文本渲染</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.beginPath();   
  28.         context.font = "50px Verdana";   
  29.         var gradient = context.createLinearGradient(0,0,800,0);   
  30.         gradient.addColorStop("0","magenta");   
  31.         gradient.addColorStop("0.5","blue");   
  32.         gradient.addColorStop("1.0","red");   
  33.         context.fillStyle = gradient;   
  34.         context.strokeStyle = "#00AAAA";   
  35.         context.strokeText("airingursb.github.io", 50, 100);   
  36.         context.fillText("airingursb.github.io", 50, 200);   
  37.   
  38.         //限制宽度   
  39.         context.fillText("airingursb.github.io", 50, 300, 200);   
  40.   
  41.         context.beginPath();   
  42.         var img = new Image();   
  43.         img.src = "./images/bg1.jpg";   
  44.         img.onload = function(){   
  45.             var pattern = context.createPattern(img, "repeat");   
  46.             context.fillStyle = pattern;   
  47.             context.fillText("airingursb.github.io", 50, 400);   
  48.         }   
  49.   
  50.         context.beginPath();   
  51.         context.fillStyle = "#00AAAA";   
  52.         context.fillText("Airing的博客,欢迎访问", 50, 500);   
  53.     };   
  54. </script>   
  55. </body>   
  56. </html>  

运行结果:
使用HTML5 Canvas API控制字体的显示与渲染的方法

这里第一行使用的是一般颜色的strokeText()方法,第二行使用的是渐变色的fillText()方法,第三行设置了maxlen,第四行给字体填充的是纹理图案,第五行是广告……

HTML / CSS 相关文章推荐
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
Jun 04 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 #HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 #HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 #HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 #HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 #HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 #HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 #HTML / CSS
You might like
PHPExcel笔记, mpdf导出
2016/05/03 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
基于jquery的tab切换 js原理
2010/04/01 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
[02:27]《DAC最前线》之附加赛征程
2015/01/29 DOTA
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
python+opencv打开摄像头,保存视频、拍照功能的实现方法
2019/01/08 Python
python os.fork() 循环输出方法
2019/08/08 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
工商管理本科毕业生求职信范文
2013/10/05 职场文书
集团薪酬管理制度
2014/01/13 职场文书
大学社团活动策划书
2014/01/26 职场文书
求职毕业生自荐书
2014/02/08 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
pytorch实现手写数字图片识别
2021/05/20 Python