vue 添加水印

 HTML部分

<template>

  <div id="app">

    <div id='canvas'></div>

    <HelloWorld msg="Welcome to Your Vue.js App"/>

  </div>

</template>

 水印方法 注意需要在mouted里调用

   init() {
    let name = '刘小举的水印'; //水印的内容
    let can = document.createElement('canvas'); //创建一个canvas
    let body = document.getElementById('canvas');//这个元素将只用于显示canvas
    console.log(can,'查看元素')
    body.appendChild(can);//插入元素
    can.width = 250;
    can.height = 150;
    can.style.display = 'none';
    let cans = can.getContext('2d');
    cans.rotate(-20 * Math.PI / 80); //设置旋转角度
    cans.font = "18px Microsoft JhengHei"; //字体
    cans.fillStyle = "rgba(17,17,17,0.15)";//颜色
    cans.textAlign = 'center';
    cans.textBaseline = 'Middle';
    cans.fillText(name, can.width / 5, can.height / 1); //绘制文本
    body.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";//将所设置的canvas设为模板的背景
    body.style.position = 'absolute';
    body.style.pointerEvents = 'none';//因为水印需要层级可能会影响到其他事件的使用 所以使用该属性穿透一下
    body.style.zIndex = '9999';//层级设置
    body.style.width = '100vw';
    body.style.height = '100vh';
}