利⽤canvas把⽂本和图⽚结合到⼀起展⽰成⼀张图⽚在页⾯展⽰出来
canvas 使⽤⽅法见mdn
主要思路
## 在html中创建<img> 和 <canvas> 两个标签，<img>初使状态为display:none； <canvas>始终为display:none；紧接着⽤js去画图，把原始图⽚和⽂本结合起来，会返回⼀个bease64格式的超链接，把超链接地址直接复值给img标签，复制完毕之后设置img标签为display:true 在页⾯中展⽰出来。
html部分
<img :src="img"  v-show=”isshow“/>
<canvas
class="extrapolation"
width="1428"
height="1872"
ref="extrapolation"
id="extrapolation"
v-show="show"
/>
js部分
import {  ref, onMounted } from "vue";
setup() {
onMounted(async () => {
await canvasCode();
const codes = ref("");
const isshow = ref(false)
});
const img = ref();
const canvasCode = () => {
const myCanvas = document.querySelector("#extrapolation");
const myContext = Context("2d");
const myImage = new Image();
myImage.src = require("../../../assets/images/teacher/home/Extrapolation.png");
//图⽚加载完毕执⾏
myContext.drawImage(myImage, 0, 0, myCanvas.width, myCanvas.height);
myContext.font = "114px 宋体";
myContext.lineWidth = 9;
myContext.strokeStyle = "#164970";
myContext.strokeText(codes.value, 530, 452);
svg和canvas的区别
//把图⽚地址赋值给img
img.value =  DataURL();
//图⽚赋值完毕之后让img标签展现出来
isshow.value = true;
};
};
return {
img,
codes，
};
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。