效果

定义画布

<canvas width="800" height="800"  ref="cn" ></canvas>

绘制水印

 draw(){const img = new Image()img.src='https://img1.baidu.com/it/u=3035183739,1826404114&fm=253&fmt=auto&app=138&f=JPEG'img.onload=(()=>{const canvas =this.$refs.cn//获取元素const p =canvas.getContext('2d')//定义画笔//p.drawImage(img,0,0) //图片绘制在画布的什么位置p.drawImage(img,0,0,canvas.width,canvas.height) //图片等比例自适应画布p.font='30px 微软雅黑 '//画笔的样式 大小 字体p.fillStyle='rgba(255,255,255,0.5)'//文字的颜色p.rotate(0.3);//文字倾斜// p.fillText('CSDN有限公司',20,40,180)//只绘制一个let txt ='   '+'梅州市粤运汽车运输有限公司'+'    '//水印文本let textMetrics = p.measureText(txt).width;//计算文本的宽度for (let i=0;i<5;i++){//行for(let j=0;j<5;j++){//列// 测量文本的大小 并且偏移p.fillText(txt,textMetrics*j,i*180,textMetrics)}}})},