利用canvas制作水印（兼容移动端哦）

移动端利用canvas制作水印

原理就是在需要放置水印的地方放入canvas,我是在html的body上放置了这个canvas；

js代码如下

function addWaterMarker(str) {
var can = document.createElement(‘canvas’);
var body = document.body;
body.appendChild(can);
//文字多可以适当调整高宽
can.width = 200;
can.height = 100;
can.style.display = ‘none’;
var cans = can.getContext(‘2d’);
cans.rotate(-20 * Math.PI / 180);
cans.font = “16px Microsoft Yahei”;
cans.fillStyle = “rgba(17, 17, 17, 0.20)”;
cans.textAlign = ‘left’;
cans.textBaseline = ‘Middle’;
cans.fillText(str, 0, can.height - 10);
body.style.backgroundImage = “url(” + can.toDataURL(“image/png”) + “)”;
}

使用的时候直接在页面调用

addWaterMarker(“XXX”);//添加水印

结果如下图所示：