共计 595 个字符,预计需要花费 2 分钟才能阅读完成。
能够给页面指定标签增加水印背景,原理是 canvas 画图,canvas.toDataURL() 转成 base64 数据,动静增加到标签的 background。
/** | |
* 动静增加水印 | |
* @param {String} str 水印内容 | |
*/ | |
function addWaterMark(str) {const body = document.getElementById('content'); | |
const canvas = document.createElement('canvas'); | |
body.appendChild(canvas); | |
canvas.width = 210; | |
canvas.height = 210; | |
canvas.style.display = 'none'; | |
var cans = canvas.getContext('2d'); | |
cans.rotate((-20 * Math.PI) / 180); | |
cans.font = '12px Microsoft JhengHei'; | |
cans.fillStyle = 'rgba(17, 17, 17, 0.1)'; | |
cans.textAlign = 'left'; | |
cans.textBaseline = 'Middle'; | |
cans.fillText(str, 30, 105, 200); | |
body.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')'; | |
} |
正文完