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教程，可以学习一下。

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

html怎样把图片放进画布中,HTML5 canvas操作图片
1.canvas操作图像的能力 canvas更有意思的一项特性就是图像操作能力.可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等.浏览器支持的任意格式的外部图片都可以使用, ...
如何消除图片锯齿 html,Html5 canvas drawImage图片抗锯齿
Html5 canvas drawImage图片抗锯齿2018-01-26 11:17 虽然drawImage会自动应用消除锯齿,但如果是从大尺寸变为小尺寸,某些图像就不尽人意了,比如曲线. 对于可能 ...
html5刮奖效果,HTML5+Canvas实战之刮奖效果
项目描述 HTML5+Canvas实战之刮奖效果,实现网页上刮奖,可以用作验证码: 可以在移动设备上和PC端网页(浏览器要支持canvas)上运行 ##使用说明 var lottery = new L ...
html弧形列表效果,JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { margin:50 ...
html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
前言: 我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz.作为一个完(wai)美(ma ...
利用HTML5 canvas合并图片并解决Filaed to execute 'toDataURL' on 'HTMLCanvasElement'异常
有两张图片,如下图所示,如何将两张图片合并成一张? 使用HTML5的canvas相关知识可以简单快捷地解决此需求. 目录结构: 源码使用原生js,不需要引入第三方库: <!DOCTYPE htm ...
html5 canvas实现图片玻璃碎片特效
今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览源码下载实现代码: html代码: & ...
html怎么把图片做成一条花纹,html5 canvas生成精美网页花纹背景图像js插件
这是一款可以在指定容器中生成精美网页背景花纹图像的js插件.该花纹背景插件使用js来生成html5 canvas,并在canvas中绘制各种花纹图像.生成的背景花纹图像可以是静态的,也可以制作成动态花 ...
html5 canvas 遮罩,HTML5 canvas如何实现橡皮擦擦拭效果
简要教程这是一款HTML5 canvas橡皮擦擦拭效果.该效果通过canvas来制作遮罩层和擦拭用的橡皮擦,用户可以通过移动鼠标来移除遮罩层,效果非常炫酷. 使用方法 HTML结构该HTML5 c ...
用HTML5 Canvas 做擦除及扩散效果
2013年的时候曾经使用canvas实现了一个擦除效果的需求,即模拟用户在模糊的玻璃上擦除水雾看到清晰景色的交互效果.好在2012年的时候学习HTML5的时候研究过canvas了,所以在比较短的时间内 ...

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

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

最新文章

热门文章