一、实现思路
因为之前负责过公司的后端平台建设,有很多敏感信息,所以有了给前端页面加水印的需求。网上看了一些案例,其实道理都一样,在这里简单记录一下。
1、创建画布
首先,想要绘制水印,我们第一步要创建canvas,拿到画笔,才能开始绘制。
这里注意设置每一块画布的大小,也就是你绘制水印区域的大小。
const canvas = document.createElement('canvas')
canvas.setAttribute('width', 200)
canvas.setAttribute('height', 175)
2、绘制水印样式
接下来,设置水印的字体大小、颜色、样式,以及展示的文本,旋转角度等等基础属性。
// 得到画笔,开始绘制图形
const ctx = canvas.getContext('2d')
ctx.textAlign = 'center'
ctx.font = '16'
ctx.fillStyle = 'rgba(0, 0, 0, 0.06)'
ctx.rotate(Math.PI / 180 * -25)
ctx.fillText(