<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.str {
font: normal bold 5px Arial
/*font-size: 5px*/
color: rgb(224, 226, 226,0.4)
position: absolute
padding-left: 16px
padding-top: 53px
display: none
}
.str2 {
font: normal bold 5px Arial
/* font-size: 5px*/
color: rgb(224, 226, 226,0.4)
position: absolute
padding-left: 66px
padding-top: 130px
display: none
}
</style>
</head>
<body>
<div>HOMEANGEL</div>
<div>HOMEANGEL</div>
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" style="width:100pxheight:100px" />
<div id="picture" style="width:100%margin-left: 60px">
</div>
<script>
$(function () {
var img = ["https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"]
GetCanvas(img)
})
function AddCanvas(src, ById) {
var img = new Image()
img.src = src
img.onload = function () {
imgW = img.width
imgH = img.height
//准备canvas环境
var canvas = document.getElementById(ById)
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext("2d")
// 绘制图片
ctx.drawImage(img, 0, 0, img.width, img.height)
// 绘制水印
ctx.font = "20px bold Arial"
ctx.fillStyle = "rgb(224, 226, 226,0.6)"//这里是颜色
ctx.fillText("watermark watermark", 20, 60)
ctx.fillText("watermark watermark", 120, 160)
ctx.fillText("watermark watermark", 220, 220)
//ctx.fillText("HOMEANGEL", 90, 130)
canvas.style.width = "100px"
canvas.style.height = "100px"
}
}
function GetCanvas(Strhtml) {
if (Strhtml.length >0 &&Strhtml != "") {
var html = ""
for (var i = 0i <Strhtml.lengthi++) {
var str = "sample" + (i + 1)
html += ' <canvas id=' + str + ' name="test" src=' + Strhtml[i] + ' "></canvas>'
}
$("#picture").html(html)//这里图片添加到html，然后for，添加水印
}
for (var i = 0i <Strimg.lengthi++) {
var str = "sample" + (i + 1)
var src = Strhtml[i]
AddCanvas(src, str)//id没传递
}
}
</script>
</body>
从传统意义上讲，水印是用来鉴别真假的，因为他们的存在并不影响印刷在该页上内容的清晰度。后来把水印的概念引入数字时代。在页面制作时利用这个技巧，在页面上就可以做出一个半透明的标志，它就像独立的悬浮在页面上一样。尽管这很麻烦，但能产生非常漂亮的效果。这里有几种在主页上产生水印效果的方法。例如，如果访问者使用的是IE浏览器，只需用<BODY background=graphic/g.gif bgprgperties=fixed就可产生水印效果。但这对Navigator不适用，它会自动地将图片平铺显示。为了兼顾不同的浏览器，必须使用动态HTML来实现这个功能。GeoCities采用服务器端来检测访问者使用的浏览器，并针对不同的浏览器（IE或Navigate）采用不同的实现方法。下面是一种单一的客户端脚本，它能在上述两种浏览器上工作，甚至还可以给用户更大的选择余地。
第一步，创建或设计水印图案。它可以是支持任何HTML语言的图像格式，尽管图像的尺寸是准确的，还必须将它的尺寸提供给脚本。同时还需花时间从页面的整体上来考虑水印的设计。水印是否设计为透明的？是否要和背景色协调？应该有多大？建议这一步一定要细心，以免遮蔽页面或扰乱访问者的注意力。
第二步，确定把水印放在不支持DHTML浏览器的何处（比如说底部）。然后在<DIV标记中嵌入属性id=watermark,stytle=position:absolute。
第三步，在包含水印的<DIV容器之后添加该脚本，这样就可以实现水印效果。较好的位置是放在结束的</BODY标记前。
这样就可以在不同的浏览器的网页中添加水印效果了，注意其中对水印效果的宽度位置和像素等就需要设计者根据需要来进行设计。
css样式不可以重复使用。这是因为，外部css样式和内部css样式同时存在，以内部css样式为准。
内部css样式与标签的style属性同时存在，以style属性的样式为准。
所以，CSS类的优先级更高，如果存在相同的样式属性，CSS类中的定义的样式会覆盖掉
