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