文本属性
  • 字体：fontcanvas里得font属性和css的font属性是一样的，它可以设置文本的粗细、字号、字体等
    • css设置字体：p{font:bold 18px serif}
    • canvas设置字体：ctx.font = 'bold 18px serif'
  • 水平对齐： textAlign下方文字的x位置都是一样，都是垂直虚线的x位置，它们的textAlign的属性各不相同
    image.png
    • start和end受html的dir属性影响

image.pngimage.png
默认情况：<html dir="ltr"> <html dir="rtl">

  • 垂直对齐： textBaselinen

image.png

alphabetic 默认。标准字母基线对齐
top 上对齐
hanging 悬挂基线对齐
middle 垂直居中
ideographic 表意基线对齐
bottom 下对齐

文本的绘制方法
  • 填充文字 fillText(text, x, y, maxWidth)
  • 描边文字 strokeText(text, x, y, maxWidth)
  • 获取文字宽度的方法：measureText(text)

布艺文字
  • 要点：fillText(), strokeText(), setLineDash(), shadowColor, shadowBlur, shadowOffsetY

image.png
实现上图的代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>文本</title>
  7.     <style>
  8.         body {
  9.             margin: 0;
  10.             overflow: hidden
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <canvas id="canvas"></canvas>
  17.     <script>
  18.         const canvas = document.getElementById('canvas');
  19.         canvas.width = window.innerWidth;
  20.         canvas.height = window.innerHeight;
  21.         const ctx = canvas.getContext('2d');
  23.         /*文字内容*/
  24.         const text = 'canvas';
  26.         /*文字位置*/
  27.         const [x, y] = [50, 200];
  29.         /*字体属性，文字加粗，大小：200px，字体：arial*/
  30.         ctx.font = 'bold 200px arail';
  32.         /*投影，颜色：rgba(0,0,0,0.6)，垂直偏移：2，模糊：4*/
  33.         ctx.shadowColor = 'rgba(0,0,0,0.6)';
  34.         ctx.shadowOffsetY = 2;
  35.         ctx.shadowBlur = 4;
  37.         /*填充文字，颜色：#a76921*/
  38.         ctx.fillStyle = '#a76921';
  39.         ctx.fillText(text, x, y);
  41.         /*实线描边文字，颜色：#f0d5ac，线宽：8*/
  42.         ctx.strokeStyle = '#f0d5ac';
  43.         ctx.lineWidth = 8;
  44.         ctx.strokeText(text, x, y);
  46.         /*虚线描边文字，颜色：#333，线宽：1，线段长度[5,3]*/
  47.         ctx.strokeStyle = '#333';
  48.         ctx.lineWidth = 1;
  49.         ctx.setLineDash([5, 3]);
  50.         ctx.strokeText(text, x, y);
  51.     </script>
  52. </body>
  54. </html>