如何在h5网页添加水印

Canvas简介及实践：

canvas是HTML5新增的元素，主要作用是支持用JS画图。

一、创建Canvas元素

二、通过JavaScript来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

•1:JavaScript使用id来寻找canvas元素。

•2:创建context对象。getContext(“2d”)对象是内建的HTML5对象。

3:绘制一个红色的矩形。fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸

三、实例-图像 把一幅图像放置到画布上：

四、水印生成主流程

1、建立一个画布：

2、生成水印字符串：

3、CanvasElement.toDataURL() 方法返回一个包含图片展示的data URLs，包含了Base64过的图像信息。说明：Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents. 例如：“data:image/pngbase64,R0lGODdhMAAwAPAAAAAAAP”

4、平铺在background上

我的想法是在上面加一个DIV绝对定位，DIV里面是一堆宽和高都为1个像素的，鼠标移到小的像素的DIV上时，让他的背景和透明度不见，这样下面刮奖的内容就可以显示出来了，因为DIV又小又多，所以可能需要来回移动鼠标，模拟刮奖的过程

1. 打开软件，点击左上角的“添加文件”按键，选择好需要去水印的视频。

2.

在视频打开后，工具栏里分别有“选择”、“笔”、“查找徽标”三个按键。这代表了三种去水印的方法。使用“选择”的话，就跟我们使用屏幕截图

一样，在有水印出现的地方用鼠标拉出一个框，把这个水印遮掩住就行了。使用“笔”的话，就想用系统的画板，直接用笔在水印位置上涂抹。使用“查找徽标”是

软件自动计算水印位置进行遮掩。（通常不建议使用这项，很多时候水印都不会遮掩的很干净的。）

---