文字基础

  1. context.font = '50px serif';
  2. context.fillStyle = '#FF0000';
  3. context.fillText('Hello World', 100, 80);

这是最基本的三行代码，第一行不写的话，默认是 10px sans-serif。关于font属性，取值参照CSS的font属性：
[font style] [font weight] [font size] [font face]
比如：context.font = ‘italic bold 24px serif’;

fillText 和 strokeText

fillText就是用 fillStyle 填充整个文字，
而strokeText是用 strokeStyle 对文字进行描边
image.png

对齐方式 textBaseline/textAlign

:::info textBaseline属性用于垂直对齐，它的属性值如下： ::: image.png

  1.       const cvs=document.getElementById('test');
  2.     cvs.width=window.innerWidth;
  3.     cvs.height=window.innerHeight;
  4.     const ctx=cvs.getContext('2d');
  6.     /*辅助线*/
  7.     ctx.strokeStyle='#999';
  8.     ctx.setLineDash([8]);
  9.     ctx.moveTo(30,300);
  10.     ctx.lineTo(700,300);
  11.     ctx.stroke();
  13.     /*font 设置字号字体*/
  14.     ctx.font="24px Arial";
  16.     /*
  17.     * textBaseline 文字垂直对齐方式
  18.     *   top：上对其
  19.     *   middle：垂直居中对齐
  20.     *   bottom：下对齐
  21.     *   hanging：悬挂基线对齐
  22.     *   alphabetic：标准字母基线对齐，默认
  23.     *   ideographic：表意文字基线
  24.     * */
  25.     ctx.textBaseline='top';
  26.     ctx.fillText('top',100,300);
  28.     ctx.textBaseline='middle';
  29.     ctx.fillText('middle',200,300);
  31.     ctx.textBaseline='bottom';
  32.     ctx.fillText('bottom',300,300);
  34.     ctx.textBaseline='hanging';
  35.     ctx.fillText('hanging',400,300);
  37.     ctx.textBaseline='alphabetic';
  38.     ctx.fillText('alphabetic',500,300);
  40.     ctx.textBaseline='ideographic';

这里我说下textBaseline的几个属性值：
“alphabetic”：默认值，用于拉丁文或类似的文字。
“ideographic”：用于表意文字，如中文和日文。
“hanging”：用于梵文或类似的文字。 :::info textAlign属性用于水平对齐 ::: 这里的居中只是文本自身的，不是相对于整个canvas，如果想居中于canvas，只需把(x, y)设置为canvas的中心点即可。

文本渐变 createLinearGradient

  1. context.createLinearGradient(x0,y0,x1,y1);
  2. //x0    渐变开始点的 x 坐标
  3. //y0    渐变开始点的 y 坐标
  4. //x1    渐变结束点的 x 坐标
  5. //y1    渐变结束点的 y 坐标

如果想在文本上应用渐变，需要注意一点：渐变依赖于定义时的区域，超出这个区域只有纯色，而不是渐变色。
比如文本是这么定义的：context.fillText(‘Text’, 100, 100); 我们希望渐变从(100, 100)开始，结束于文本的右侧，现在我们需要知道文本的宽度。 :::info 这就要用到measureText()方法，它返回一个 TextMetrics 对象，这个对象只有一个width属性。 :::

  2. var text = 'hello canvas';
  3. var metrics = context.measureText(text);
  4. var textWidth = metrics.width;
  5. gradient = context.createLinearGradient(100, 100, textWidth, 100);

案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         body {
  7.             background: #dddddd;
  8.         }
  10.         #canvas {
  11.             margin: 10px;
  12.             padding: 10px;
  13.             background: #ffffff;
  14.             border: thin inset #aaaaaa;
  15.         }
  16.     </style>
  17. </head>
  19. <body>
  20. <canvas id='canvas' width='600' height='300'>
  21.     Canvas not supported
  22. </canvas>
  24. <script >
  25.     let canvas = document.getElementById('canvas')
  26.     let context =canvas.getContext('2d');
  28.     context.font = '38pt Arial';
  29.     context.fillStyle = 'cornflowerblue';
  30.     context.strokeStyle = 'blue';
  31.     // 创建一个渐变
  32.     var gradient=context.createLinearGradient(0,0,canvas.width,0);
  33.     gradient.addColorStop("0","magenta");
  34.     gradient.addColorStop("0.5","blue");
  35.     gradient.addColorStop("1.0","red");
  36.     // 填充一个渐变
  37.     context.fillStyle= gradient;
  39.     context.fillText("Hello Canvas", canvas.width/2 - 150, canvas.height/2 - 30);
  40.     context.strokeText("Hello Canvas", canvas.width/2 - 150,canvas.height/2 + 80 );
  42. </script>
  43. </body>
  44. </html>