vue canvas 绘制区域插入文字

Vue.js 中 Canvas 插入文字的实现方法
在 Vue.js 项目中，可以通过 HTML 的 <canvas> 元素结合 JavaScript 来实现在画布上插入文字的功能。以下是具体的实现方式：
实现步骤说明

引入 Canvas 元素首先，在模板部分定义一个 <canvas> 元素，并为其绑定宽高属性。

操作 Canvas 上下文使用 getContext('2d') 方法获取 Canvas 的绘图上下文对象，然后调用其提供的 API 绘制文字。

动态更新文字内容利用 Vue 数据响应特性，当数据发生变化时重新渲染 Canvas 图形。

示例代码
以下是一个完整的 Vue.js 示例，展示如何在 Canvas 区域插入并动态更新文字[^1]。
<template>
<div id="app">
<!-- 输入框用于修改文字 -->
<input type="text" v-model="textToDraw" placeholder="输入要绘制的文字" />

<!-- Canvas 元素 -->
<canvas ref="myCanvas" width="400" height="200"></canvas>
</div>
</template>

<script>
export default {
data() {
return {
textToDraw: "默认文字", // 要绘制的文字，默认值
};
},
watch: {
// 当文本变化时重绘 Canvas
textToDraw(newText) {
this.drawTextOnCanvas();
},
},
mounted() {
// 初始化时绘制一次
this.drawTextOnCanvas();
},
methods: {
drawTextOnCanvas() {
const canvas = this.$refs.myCanvas;
const ctx = canvas.getContext("2d");

// 清除之前的绘制内容
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 设置字体样式
ctx.font = "30px Arial";
ctx.fillStyle = "#333";

// 计算文字居中的位置
const x = canvas.width / 2;
const y = canvas.height / 2;

// 文字水平垂直居中
ctx.textAlign = "center";
ctx.textBaseline = "middle";

// 绘制文字到 Canvas
ctx.fillText(this.textToDraw, x, y);
},
},
};
</script>

<style scoped>
#app {
display: flex;
flex-direction: column;
align-items: center;
}
canvas {
border: 1px solid #ccc;
}
</style>
登录后复制

关键点解析

动态绑定文字使用 Vue 的双向绑定功能 (v-model) 将用户输入与内部状态关联起来，从而实现动态更新效果。

Canvas 基本操作

ctx.font: 定义字体大小和样式。
ctx.fillStyle: 设定文字颜色。
ctx.fillText(text, x, y): 在指定坐标 (x, y) 处绘制文字。

清除旧内容每次重新绘制前需调用 clearRect() 方法清空 Canvas，防止新内容叠加在旧内容之上。

文字对齐设置使用 textAlign 和 textBaseline 属性可以方便地控制文字的位置和对齐方式。