canvas学习日记-文字

发表于

font

font 属性设置或返回画布上文本内容的当前字体属性，语法与 CSS font 属性相同。

font

  • 默认值：”20px sans-serif”
  • ctx.font = font-style font-variant font-weight font-zise font-family

























属性 值
font-style
normal (Default)

italic (斜体字：通常字体会设计一个专门的斜体字)

oblique (倾斜字体：简单的将字体倾斜)
font-variant
normal (Default)

small-caps (将英文中的小写字母变成小型的大写字母)

font-weight
lighter

normal (Default)

bold

bolder

W3C将font-weight分为不同的等级：

100,200,300,400(normal),

500,600,700(bold),

800,900
font-size
20px (Default)

2em

150%

font-size可以分为以下几种几号：

xx-small

x-small

medium

large

x-large

xx-large

font-family
web安全字体

fillText
| 参数 | 描述 |
|–|–|–|
| text | 规定在画布上输出的文本。 |
| x | 开始绘制文本的 x 坐标位置（相对于画布）。 |
| y | 开始绘制文本的 y 坐标位置（相对于画布）。 |
| maxWidth | 可选。允许的最大文本宽度，以像素计。 |

基本使用：

1
2
3
ctx.font = 'bold 40px Arial'
ctx.fillText('Canvas', 0, 200)
ctx.strokeText('Canvas', 0, 300)

image

1
2
3
4
5
6
7
8
9
// 渐变
const linearGrad = ctx.createLinearGradient(0,0,800,0)
linearGrad.addColorStop(0.0,'red')
linearGrad.addColorStop(0.25,'orange')
linearGrad.addColorStop(0.5,'yellow')
linearGrad.addColorStop(0.75,'green')
linearGrad.addColorStop(1.0,'purple')
ctx.fillStyle = linearGrad
ctx.fillText('canvascanvascanvascanvascanvascanvascanvascanvascanvas', 0, 400)

image

1
2
3
4
5
6
7
8
9
// 纹理
const backgroundImg = new Image()
backgroundImg.src = 'https://www.cnblogs.com/skins/coffee/images/bg_body.gif'
backgroundImg.onload = () => {
  const pattern = ctx.createPattern(backgroundImg, 'repeat')
  ctx.fillStyle = pattern
  ctx.font = 'bold 100px Arial'
  ctx.fillText('canvas', 0, 500)
}

image

textAlign属性：调整文本的水平对齐方式

值 描述
left 起始点为左边界
center 起始点为中间位置
center 起始点为右边界 
1
2
3
4
5
6
7
8
9
10
11
12
13
// textAlign
ctx.font = '40px quick'
ctx.textAlign = 'left'
ctx.fillText('left', 400, 1000)
ctx.textAlign = 'center'
ctx.fillText('center', 400, 1100)
ctx.textAlign = 'right'
ctx.fillText('right', 400, 1200)

ctx.strokeStyle = 'rgba(0,0,0,.4)'
ctx.moveTo(400,900)
ctx.lineTo(400,1200)
ctx.stroke()

image

textBaseline属性：调整文本的垂直对齐方式

值 描述
top 起始点为上边界
middle 起始点为中间位置
bottom 起始点为下边界
alphabetic(Default) (拉丁文)
ideographic (汉字，日文等方块文字)
hanging (印度语) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// textBaseline
ctx.textAlign = 'center'
ctx.font = '40px quick'

ctx.textBaseline = 'top'
ctx.fillText('top-中英文-abcdefg', 400, 1300)

ctx.textBaseline = 'middle'
ctx.fillText('middle-中英文-abcdefg', 400, 1400)

ctx.textBaseline = 'bottom'
ctx.fillText('bottom-中英文-abcdefg', 400, 1500)

ctx.textBaseline = 'alphabetic'
ctx.fillText('alphabetic-中英文-abcdefg', 400, 1600)

ctx.textBaseline = 'ideographic'
ctx.fillText('ideographic-中英文-abcdefg', 400, 1700)

ctx.textBaseline = 'hanging'
ctx.fillText('hanging-中英文-abcdefg', 400, 1800)

image