在html中准备canvas环境
<canvas id="myCanvas" width="1000" height="500">
</canvas>
取/存图片
var img =new Image();
img.src="";
在图片加载完成后,调用canvas的drawImage(),将我们的图片绘制在canvas的图层上面
img.onload=function (){
var canvas=docunment.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.drawImage(img,0,0);
}
在canvas上绘制好图片之后,回到onload函数中,利用我们在上一步中获取的ctx对象,继续绘制水印。
font属性可以自定义水印的大小以及字体
fillStyle()方法可以自定义水印的他颜色以及透明度
fillText()则完成最后的填充以及水印的位置定位。
ctx.font="20px microsoft yahei";
ctx.fillStyle = "rgba(255,255,255,0.5)";
ctx.fillText("my images",100,100);
(8.6自我学习)