前端实现水印（可通过接口动态渲染样式）

一、业务要求
        要求前端实现水印功能，且水印的样式（字体大小等）是通过接口返回决定的

二、实现方法
        1、在项目utils文件夹下创建水印对应的js文件，一般工具类文件都可以放在这个文件夹下

         2、js文件就是具体实现水印的代码

'use strict'

const watermark = {}
//sysStyle 就是接口返回的样式对象
const setWatermark = (str, sysStyle) => {
 
  
  can.width = 550  // 单个单位的宽
  can.height =  200 // 单个单位的高
  const cans = can.getContext('2d') // 获取canvas画布
  cans.font = `${sysStyle.fontSize + 'px'} Vedana `// 水印字体样式

  cans.fillStyle = sysStyle.color // 字体颜色
  cans.globalAlpha = sysStyle.transparency / 100 // 透明度
  if (sysStyle.tileManner === '2') {  
    cans.rotate(-20 * Math.PI / 290) // 逆时针旋转π/9
  }
  if (sysStyle.showManner === '1') { // 一个
    cans.textAlign &#