使用HTML5 Canvas给图片加水印效果|三体教程
文章目录

使用HTML5 Canvas给图片加水印效果

HTML5现在是越来越广泛了,网上铺天盖地的都是html5游戏、动画。

还有现在现在朋友圈每天分享、转发的链接,几乎90%的页面都是html5制作的。

所以HTML5是大势所趋,现在不好好学习HTML5,以后势必将会被淘汰。

今天小编分享的是使用HTML5 Canvas给图片加水印效果。

html代码<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>使用HTML5 Canvas给图片加水印效果-三体教程</title>
</head>
<body onload="init()">
<header>HTML5 Canvas神奇的图片水印</header>
<section id="content">
	<canvas height="590" width="442" id="canvas"></canvas>
</section>
<input id="text" value="www.santii.com" width="100"></input>
<button onclick="change()">更改水印文字</button>
<script>
var text="www.santii.com"

function change(){
text=document.getElementById("text").value;
init();
}

function init(){
watermark('canvas','1504426686722383.jpg',text);
}
	function watermark(id,imgsrc,txt) {
		canvas = document.getElementById(id);
		if (canvas.getContext){
			ctx = canvas.getContext('2d');
			var img1 = new Image();
			img1.src=imgsrc;
			img1.onload = function(){
				var imgWidth=img1.width;
				var imgHeight=img1.height;
				canvas.width= imgWidth;
				canvas.height=imgHeight;
				ctx.drawImage(img1,0,0);
				ctx.fillStyle    = 'rgba(0, 0, 0, 0.25)';
				ctx.font         = '30px sans-serif';
				ctx.fillText(txt, canvas.width-(txt.length*15),canvas.height-30);
				ctx.fillStyle    = 'rgba(255, 255, 255, 0.25)';
				ctx.fillText(txt, canvas.width-(txt.length*15)-2,canvas.height-32)
			}
		}
	}
</script>
</body>
</html>

亲自测试一下

有兴趣的小伙伴可以看看三体教程里面的HTML5教程,可以学习一下。

本文网址:http://www.santii.com/article/30.html


数据更新时间:2018-05-26