canvas学习之将文字写在canvas上

复习

本节之前，我们一直在学习如何在canvas上绘制图形。moveTo和lineTo方法配合使用，我们就能绘制出线条来，同时利用数学方法，我们还能绘制出多种图形来。一些常见的图形，既可以使用线条组合，也可以使用canvas已经提供了的方法，比如 绘制矩形，就有rect方法，fillRect方法，strokeRect方法。绘制圆和圆弧，就有arc方法，arcTo方法。绘制结束时，用fill我们会得到一个填充图形，用stroke我们会得到绘制的线条。

为了能够让绘制出来的东西丰富多彩，我们使用strokeStyle和fillStyle来添加颜色，透明，渐变，图案等。

同时绘制的线条可以使用lineCap，lineWidth，lineJoin， setLineDash等来设置线条的样式。

学习

这节我们来学习使用如何在canvas上写字。

  • 在canvas写字，我们会用到两个方法，fillText(text，x,y, maxwidth)和strokeText(text，x,y, maxwidth()。其中，text是指需要绘制的文字，x，y是指文字开始绘制的起点，需要注意的是，这个是文字左下角的位置，不是左上角，一定要计算好了。maxWidth是指需要绘制的最大宽度，超过这个宽度就不绘制了。其中，maxwidth是可选的。相信通过前面的学习，fillText和stroekText的区别大家都已经知道了，不过这里我还是讲一下。fillText绘制的图形是填充文本，strokeText绘制的图形是文本框文本。具体请看我的示例。

  • 在日常的网页写作中，我们需要设置字体，大小，对齐方式，文本方向等样式。在canvas中，同样需要。

    • 字体大小和字体内容使用font来实现。具体如下

      1
      font = "100px Microsoft YaHei"

    • textAlign用来设置文字的对齐方式，可选的值有start，end，left，right， center。 默认值是 start。

    • textBaseLine基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。

    • direction 用来设置文本方向。ltr表示文本从左向右展示，rtl表示文本从右向左展示。这时请注意，文本的开始方向是右下角。inherit继承canvas或者相应的dom的2文字方向来确定。

  • 有时后，我们可能需要明确知道文本的长度，这个时候，我们有一个接口，measureText()。它将返回一个对象，包含width,actualBoundingBoxLeft,actualBoundingBoxRight,actualBoundingBoxAscent,actualBoundingBoxDescent四个值，其中width就是文本的宽度。

    扩展：在一些地方，我们可能需要测量具体的文本宽度，尤其是中文英文数字混杂在一起时，直接用length+em来显示长度并不是很精准。我们可以尝试着使用measureText方法。

接下来。进入示范，例子代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<canvas width="500" height="500" id="mycanvas"></canvas>
<style>
canvas{
  border:solid red 1px;
  text-align: left;
  position: relative;
}
</style>
<script>
  const canvas = document.getElementById('mycanvas')
  if (canvas.getContext('2d')) {
    const ctx = canvas.getContext('2d')
    ctx.fillStyle = '#e74478'
    for(let i = 0; i <= 50; i++) {
      ctx.beginPath()
      ctx.strokeStyle = "green"
      ctx.moveTo(0, i * 50)
      ctx.lineTo(500, i * 50)
      ctx.closePath()
      ctx.stroke()
    }
    ctx.beginPath()
    ctx.moveTo(0, 120)
    ctx.lineTo(500, 120)
    ctx.closePath()
    ctx.stroke()
    ctx.fillStyle = '#e74478'
    ctx.font = "20px serif"
    ctx.direction = 'inherit'
    ctx.textBaseLine = 'top'
    let text =  '我要进行测试'
    let textWidth = ctx.measureText(text)
    console.log(textWidth, 'ddd')
    ctx.fillText(text, 20, 120, textWidth.width)
  }
</script>

canvas中关于文字的部分，我们就都学完了，下一节开始，我们学习如何将已有图像的绘制和操作。这里的图像的绘制和操作是和之前作为颜料的图像有很大的区别的，在下面的内容中，我们将能够操作图像，做很多事情。