玩转canvas之文字样式封装


文字样式与绘制

  • 封装设置文本样式方法
    • 代码
  • 封装绘制文本方法
  • 示例与图像
    • 示例
    • 图像
  • 总结

封装设置文本样式方法

代码

该方法主要用于设置文本的大小，字体，对齐方式和基线等基础样式

1
2
3
4
5
6
7
8
9
10
fontStyle(size, family, align, baseline){
 let ctx = this.ctx
  let font = ctx.font.split(" ")
  size > 0 ? font[0] = size +'px' : null
  family ? font[1] = family : null
  ctx.font = font.join(" ")
  align ? ctx.textAlign = align : null
  baseline ? ctx.textBaseline = baseline : null
  return this
}

size: 是文本的大小
family: 是文本字体样式
align: 是文本对齐方式
baseline: 是当前文本基线
具体内容可参考

  1. 文本对齐方式textAlign
  2. 文本基线textBaseline

封装绘制文本方法

1
2
3
4
5
6
7
8
9
10
11
12
write(text, fillColor, strokeColor, x, y){
  let ctx = this.ctx
  if(fillColor){
    ctx.fillStyle = fillColor
    ctx.fillText(text, x, y)
  }
  if(strokeColor){
    ctx.strokeStyle = strokeColor
    ctx.strokeText(text, x ,y)
  }
  return this
}

该方法需要传入五个参数
text: 需要绘制的文本内容
fillColor: 填充文本的颜色
strokeColor: 描边字体的颜色（无填充）
x,y: 文本的坐标（基于左上角）

示例与图像

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let lg = ecav6.linearGradient(130,10,180,180,color)
ecav6.begin()
.rect(10,10,100,100)
.fill(rg)
.begin()
.rect(130,10,50,50)
.fill(lg)
.fontStyle()
let ecav7 = new EasyCanvas(document.getElementById('text'))
ecav7.begin()
.start(10,10)
.fontStyle(25, null, 'left', 'top')
.write("文本内容1", "red", "#000000", 60, 40)
.fontStyle(20, null, 'right', 'bottom')
.write("文本内容2", "#123023", null, 60, 40)

图像

在这里插入图片描述

总结

canvas对于文本的绘制并没有太过复杂的api，相对简单，并且对于文本的绘制我们也是可以传入一个渐变对象来实现渐变字体的艺术字。基础类的api封装已经差不多到尾声了，剩下图片img的封装，但前面的封装的方法，其实实现起来都相对的粗略了一点，并没有考虑到一些比较细致的情况，带基础类封装完毕后，会对代码进行一定的优化。