采用HTML5 Canvas API控制字体的显示与渲染的方法
发布时间：2022-06-09 06:31:19 所属栏目：搜索优化 来源：互联网
导读：今天我们开始征战一个全新的内容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？！赶快换一个吧！！ （编辑：济源站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
