html图片加水印元素,使用HTML5 Canvas给图片加水印效果

使用HTML5 Canvas给图片加水印效果2017-09-03 16:30

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

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

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

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

使用HTML5 Canvas给图片加水印效果-三体教程

HTML5 Canvas神奇的图片水印

更改水印文字

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)

}

}

}

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