您的位置：首页 > Web前端 > HTML5

h5如何添加水印

2018-03-23 00:09 204 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#cans{
display: block;
margin: 0 auto;
}
#cans2{
display: none;
margin-top: 10px;

}
</style>
</head>
<body>
<canvas id="cans" >
很抱歉您的浏览器版本不支持该功能
</canvas>
<canvas id="cans2" >
很抱歉您的浏览器版本不支持该功能
</canvas>
<script type="text/javascript">
//画布初始化
var cans=document.getElementById("cans");
cans.height=767;
cans.width=766;
var cantent=cans.getContext("2d");
var img=new Image();
img.src="IMG_0003.JPG";
var cans2=document.getElementById("cans2");
cans2.height=100;
cans2.width=200;
var cantent2=cans2.getContext("2d");
cantent2.font="bold 19px arial"
// cantent2.lineWidth=2
cantent2.strokeStyle="white";
cantent2.textAlign="right-bottom";
cantent2.textBaseline="top";
cantent2.strokeText("xiE.Bin-2018.1.26",30,70);

img.onload=function(){
cantent.drawImage(img,0,0,cans.width,cans.height)
cantent.drawImage(cans2,500,650)
}

//开始绘图

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 原生js

相关文章推荐

新的分享

章节导航