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

发布时间：2022-06-08 09:05 所属栏目：122 来源：互联网

导读：

导读：今天我们开始征战一个全新的内容HTML5 Canvas的文本API！要知道，艺术家通常同时也是一个书法家，所以我们要学习写字，而且是写出漂亮的字。是不是很有意思？好了，先预告一下Canvas 文本API有哪些。属性描述 font 设置或返回文本内容的当前字体属性 text

　　今天我们开始征战一个全新的内容——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

　　复制内容到剪贴板

　　"zh">
　　
　　"UTF-8">

　　基本文本显示

　　"canvas" >

　　你的浏览器居然不支持Canvas？！赶快换一个吧！！

　　

（编辑：ASP站长网）