使用HTML5 Canvas API控制字体的显示与渲染的方法_html5教程技巧

H5教程评论178 views阅读模式

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. "zh">
  2. "UTF-8">
  3. 基本文本显示
  4. "canvas" >
  5. 你的浏览器居然不支持Canvas?!赶快换一个吧!!

企鹅博客
  • 本文由 发表于 2020年9月17日 03:48:20
  • 转载请务必保留本文链接:https://www.qieseo.com/345700.html

发表评论