版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/my_study_everyday/article/details/82219095
概述
以前都是后端同学来处理的，现在有了canvas，
前端同学也可以做出水印来了，
而且要比后端同学做的要精美漂亮。
制作水印的几个步骤
- 在html中准备好
canvas标签 - 将图片绘制到
canvas元素上 - 向图片上添加水印
canvas标签
<canvas id="myCanvas" width="500" height="500">
你的浏览器不支持canvas标签，请使用最新版的chrome浏览器
</canvas>将图片绘制到canvas上
加载图片
// 通过ajax从后台获取，这里直接使用一个图片
var img = new Image();
img.src = './img/bg.jpg'; 将图片绘制到canvas上
img.onload = function(){ //图片加载完成后
var canvas = document.getElementById("myCanvas");
// 获取canvas句柄（上下文）
var ctx = canvas.getContext("2d");
// 绘制图片
ctx.drawImage(img,0,0);
}向图片上添加水印
在onload函数中
// 绘制水印
ctx.font="20px Microsoft Yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText("my images",100,100);参考文章
- canvas实现平铺水印
canvas应用
- 粒子效果