一、简介

我们可以使用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博客