如何在h5网页添加水印

Canvas简介及实践:

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

一、创建Canvas元素

规定元素的 id、宽度和高度

二、通过JavaScript来绘制

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


如何在h5网页添加水印_第1张图片

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

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

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

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

如何在h5网页添加水印_第2张图片


四、水印生成主流程

如何在h5网页添加水印_第3张图片

1、建立一个画布:

如何在h5网页添加水印_第4张图片

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/png;base64,R0lGODdhMAAwAPAAAAAAAP”

4、平铺在background上

你可能感兴趣的:(如何在h5网页添加水印)