javascript 网页水印

网页水印是一份非常有用的功能，它可以帮助我们在网页上添加一些小小的信息，达到不影响用户体验的前提下，打击恶意盗图，防止别人私自使用我们的图片。而JavaScript 可以让在页面上添加水印变得非常简单，下面就让我们一同来学习一下。

我们可以使用Canvas 在网页中创建水印。Canvas 是HTML5中的一个新特性，它提供了通过JavaScript 来绘制图形的能力。我们可以通过 “2d”上下文来绘制文字，既可用于制作网页中的水印。

canvas.width = 300;canvas.height = 150;//获取上下文var ctx = canvas.getContext("2d");//设置文字属性ctx.font = "30pt Microsoft YaHei";ctx.textBaseline = "middle";ctx.textAlign = "center";ctx.fillStyle = "rgba(240, 240, 240, .5)";ctx.strokeStyle = "rgba(240, 240, 240, .8)";//绘制文字ctx.translate(canvas.width / 2, canvas.height / 2);ctx.rotate(-Math.PI / 6);ctx.fillText("My Watermark", 0, -10);ctx.strokeText("My Watermark", 0, -10);

这个简单的代码片段就创建了一个带有水印的canvas。我们指定了canvas 的宽高，然后获取了上下文2d。接下来，我们设置了文字的属性，包括字体大小，文字基线，对齐方式，字体色和文字边框。我们用fillText 和 strokeText 两个函数来绘制文字，fillText 用以填充文字，strokeText 用以绘制边框。

假如我们想把这个canvas 放到一个网页中，我们可以把它作为一个图形放到任何一个DOM 元素中，如下：

var canvas = document.createElement("canvas");canvas.width = 300;canvas.height = 150;//获取上下文var ctx = canvas.getContext("2d");//设置文字属性ctx.font = "30pt Microsoft YaHei";ctx.textBaseline = "middle";ctx.textAlign = "center";ctx.fillStyle = "rgba(240, 240, 240, .5)";ctx.strokeStyle = "rgba(240, 240, 240, .8)";//绘制文字ctx.translate(canvas.width / 2, canvas.height / 2);ctx.rotate(-Math.PI / 6);ctx.fillText("My Watermark", 0, -10);ctx.strokeText("My Watermark", 0, -10);//添加水印var watermark = document.createElement("div");watermark.style.cssText = 'postion:absolute;top:0;left:0;z-index:1000;width:100%;height:100%;background-image:url("' + canvas.toDataURL() + '");background-repeat:repeat;';document.body.appendChild(watermark);

在这个例子中我们还使用了一个 DIV 元素作为水印的载体，这个 DIV 元素的宽高设置为100%，并且使用CSS 设置水印的位置及其他属性。最后，我们利用 toDataURL 这个 Canvas API 把 Canvas 转成一个image/png的格式，用来作为水印的背景图片。

到这里，我们就学会了使用Canvas 和 JavaScript 制作简单的网页水印了，希望这篇文章能对爱好前端开发的同学有所帮助。

上一篇：javascript 获取验证码

下一篇：php odbc 事务