从零开始学习在VUE3中使用canvas(三)：font(字体)

一、简介

我们可以使用font在canvas中绘制文字，方式如下:

const ctx = canvas.getContext("2d");
// 绘制文字
ctx.font = "24px 黑体, 宋体"; //字体大小 首选字体 备选字体
ctx.fillText("这里是显示的字的内容", 100, 50); //文字内容 x坐标 y坐标

二、代码

<template>
  <div class="canvasPage">
    <!-- 写一个canvas标签 -->
    <canvas class="main" ref="main"></canvas>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";

// 获取canvas元素
const main = ref<HTMLCanvasElement>();

// 绘制canvas
const drawCanvas = () => {
  // 确保获取到了canvas元素
  if (!main.value) return console.error("无法获取Canvas元素");
  const canvas = main.value;

  // 设置canvas的宽高
  canvas.width = 400;
  canvas.height = 100;

  // 获取Canvas绘制上下文
  const ctx = canvas.getContext("2d");
  if (!ctx) return console.error("无法获取CanvasRenderingContext2D");

  // 绘制文字
  ctx.font = "24px 黑体, 宋体"; //字体大小 首选字体 备选字体
  ctx.fillText("这里是显示的字的内容", 100, 50); //文字内容 x坐标 y坐标
};

// 页面挂载后才能绘制
onMounted(() => {
  drawCanvas();
});
</script>
<style lang="scss" scoped>
.canvasPage {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dddddf;
  .main {
    width: 400px;
    height: 100px;
  }
}
</style>

三、效果展示

 四、使用自定义字体

1.在CSS中引入新的字体，例如

@font-face {
  /* 重命名字体名 */
  font-family: "san";
  /* 引入字体 */
  src: url("这里是一个ttf文件的链接");
  font-weight: normal;
  font-style: normal;
}

2.在canvas中使用，注意，要检测字体是否加载成功

<template>
  <div class="canvasPage">
    <!-- 写一个canvas标签 -->
    <canvas class="main" ref="main"></canvas>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";

// 获取canvas元素
const main = ref<HTMLCanvasElement>();

// 绘制canvas
const drawCanvas = () => {
  // 确保获取到了canvas元素
  if (!main.value) return console.error("无法获取Canvas元素");
  const canvas = main.value;

  // 设置canvas的宽高
  canvas.width = 400;
  canvas.height = 100;

  // 获取Canvas绘制上下文
  const ctx = canvas.getContext("2d");
  if (!ctx) return console.error("无法获取CanvasRenderingContext2D");

  // 绘制文字
  ctx.font = "24px adad"; //先使用默认字体
  ctx.fillText("这里是显示的字的内容", 100, 50); //文字内容 x坐标 y坐标
  // 获取绘制的文字的像素数据
  let dataDefault = ctx.getImageData(0, 0, 400, 100).data;
  // 清空画布
  ctx.clearRect(0, 0, 400, 100);
  // 检测字体是否加载成功
  const detect = () => {
    ctx.font = "24px san";
    ctx.fillText("这里是显示的字的内容", 100, 50);
    // 如果前后数据一致，说明SYSTC字体还没加载成功，继续检测
    let dataNow = ctx.getImageData(0, 0, 400, 100).data;
    if (
      [].slice.call(dataNow).join("") == [].slice.call(dataDefault).join("")
    ) {
      ctx.clearRect(0, 0, 300, 80);
      requestAnimationFrame(detect);
    }
  };
  detect();
};

// 页面挂载后才能绘制
onMounted(() => {
  drawCanvas();
});
</script>
<style lang="scss" scoped>
@font-face {
  /* 重命名字体名 */
  font-family: "san";
  /* 引入字体 */
  src: url("这里是一个ttf文件的链接");
  font-weight: normal;
  font-style: normal;
}
.canvasPage {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dddddf;
  .main {
    width: 400px;
    height: 100px;
  }
}
</style>

如果想要更简便的判断字体是否完成加载或者不在意额外的JS包大小，可以使用第三方库比如说：

fontfaceobserver

上一章：从零开始学习在VUE3中使用canvas(二)：fillStyle(填充样式)-CSDN博客

下一章：从零开始学习在VUE3中使用canvas(四)：globalAlpha(全局透明度)-CSDN博客