canvas 动态添加 不一样的字体发生了重叠的一个效果,这样的该怎么解决
newImage(text) {
// 生成图片
var canvas = document.getElementById("canvas")
var cxt = canvas.getContext("2d")
var img = new Image()
img.src = require('../assets/img/wxqcode.png')
// 图片加载完成,才可处理
img.onload = () => {
// 画图(这里画布与图片等宽高)
cxt.drawImage(img, 0, 0)
// 设置字体大小
cxt.font = "36px Microsoft YaHei"
// 更改字号后,必须重置对齐方式,否则居中麻烦。设置文本的垂直对齐方式
cxt.textBaseline = 'middle'
cxt.textAlign = 'center'
// 距离左边的位置
var left = canvas.width / 2
// 距离上边的位置 (图片高-文字距离图片底部的距离)
var top = 150
// 文字颜色
cxt.fillStyle = "#000"
// 文字在画布的位置
cxt.fillText(text, left, top)
// cxt.fillText(text2, left, top)
imageBox.src = canvas.toDataURL("image/jpg")
// this.flag = 1
}
},
上面是我的代码,因为需要动态加文字,需要多次调用这个方法,多次调用就会出现文字重叠的问题,这种要怎么解决