vue 使用class创建和清除水印的示例代码
页面添加水印的方法有很多，以下举例使用class定义的方法进行水印内容渲染：
1、新建文件：WatermarkClass.js
exportdefaultclassWatermarkClass{
constructor({id="watermarkID",str="",fontSize=18,width=400,height=400,fillStyle="#333333",opacity=1}){
this.id=id;
this.str=str;
this.fontSize=fontSize;
this.width=width;
this.height=height;
this.fillStyle=fillStyle
this.opacity=opacity;
}
//绘制水印
draw(){
if(document.getElementById(this.id)!==null){
document.body.removeChild(document.getElementById(this.id));
}
constcanvas=document.createElement("canvas");
//设置canvas画布大小
canvas.width=this.width;
canvas.height=this.height;
constctx=canvas.getContext("2d");
ctx.rotate(-(15*Math.PI)/180);//水印旋转角度
ctx.font=`${this.fontSize}pxVedana`;
ctx.fillStyle=this.fillStyle;
ctx.textAlign="center";
ctx.textBaseline="middle";
this.str.split(",").forEach((item,index)=>{
ctx.fillText(item,canvas.width/2,canvas.height/2+(index*this.fontSize+10));//水印在画布的位置x，y轴
});
constdiv=document.createElement("div");
div.id=this.id;
div.style.pointerEvents="none";
div.style.top="30px";
div.style.left="10px";
div.style.opacity=this.opacity;
div.style.position="fixed";
div.style.zIndex="999999";
div.style.width=`${document.documentElement.clientWidth}px`;
div.style.height=`${document.documentElement.clientHeight}px`;
div.style.background=`url(${canvas.toDataURL("image/png")})lefttoprepeat`;
document.body.appendChild(div);
}
setOptions({fontSize=18,width=300,height=300,opacity=1,str=""}){
this.fontSize=fontSize;
this.width=width;
this.height=height;
this.fillStyle=fillStyle
this.opacity=opacity;
this.str=str;
this.draw();
}
//绘制
render(){
this.draw();
window.onresize=()=>{
this.draw();
};
}
//移除水印
removeWatermark(){
if(document.getElementById(this.id)!==null){
document.body.removeChild(document.getElementById(this.id));
}
}
}
2、在页面种引入使用：
importwatermarkClassfrom"@/libs/watermarkClass";
exportdefault{
name:"App",
mounted:function(){
this.initWatermark()
},
methods:{
initWatermark(){
//方法一
letwatermark=newwatermarkClass({
id:"watermarkID",
str:"紫藤萝-watermarkClass",
fontSize:20,
width:300,
height:200,
fillStyle:"#dddddd",
opacity:0.4,
});
watermark.render();
//5秒后，清除水印
setTimeout(()=>{
watermark.removeWatermark();
},5000);
}
},
};
以上就是vue使用class创建和清除水印的示例代码的详细内容，更多关于vue创建和清除水印的资料请关注毛票票其它相关文章！