English (US) 
Español (ES) 
Português (PT) 
Français (CA) 
Español (MX) 
Español (VE) 
Español (CO) 
Español (AR) 
Português (BR) 
Quechua (PE) 
Guaraní (PY) 
简体中文 (ZH) 
繁體中文 (HK) 
日本語 (JP) 
한국어 (KR) 
हिन्दी (HI) 
Pilipino (PH) 
ไทย (TH) 
Tiếng Việt (VN) 
Bahasa Melayu (MY) 
Bahasa Indonesia (ID) 
বাংলা (BD) 
اردو (PK) 
සිංහල (LK) 
ភាសាខ្មែរ (KH) 
English (UK) 
Français (FR) 
Deutsch (DE) 
Italiano (IT) 
Русский (RU) 
Nederlands (NL) 
Türkçe (TR) 
Polski (PL) 
Svenska (SE) 
Norsk (NO) 
Dansk (DK) 
Suomi (FI) 
Ελληνικά (GR) 
Čeština (CZ) 
Magyar (HU) 
Română (RO) 
Български (BG) 
Српски (RS) 
Українська (UA) 
【HTML5】canvas的文本
由 
Deepseek提供支持
Deepseek提供支持
广告
canvas 提供了两种方法来渲染文本：
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的：
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的。
当然，我们也可以改变文本的样式：
| 属性 | 描述 | 范例 |
|---|---|---|
| font | 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。 | ctx.font=”30px Arial”; |
| textAlign | 文本对齐选项. 可选的值包括：start, end, left, right, center. 默认值是 start。 | ctx.textAlign = ‘end’ |
| textBaseline | 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。 | ctx.textBaseline = ‘top’ |
| direction | 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。 | ctx.direction = ‘ltr’ |
font属性的语法：
font = 'style variant weight size/line-height family'
- style(font-style)：字体样式，可选值：normal, italic, oblique
- variant(font-variant)：字体变体，可选值：normal, small-caps
- weight(font-weight)：字体粗细，可选值：normal, bold, bolder, lighter, 100 – 900
- size/line-height：字号和行高
- family(font-family)：字体
文本测量
canvas提供了一个方法：
measureText()
measureText()方法返回的对象中，包含一个名为width的属性，它的值代表你传递给该方法的文本所占据的宽度。
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;来自:俄亥俄州·哥伦布 ，欢迎您的访问!
文章链接：https://www.lilianhua.com/html5-canvas-text.html
文章链接：https://www.lilianhua.com/html5-canvas-text.html
请先登录才能参与答题
