html 页面内加水印效果

在页面</body>前加入以下代码：

<script>
function WaterMarker(str){
var can = document.createElement('canvas');
var body = document.body;
body.appendChild(can);
can.width=300; //画布的宽
can.height=200;//画布的高度
can.style.display='none';
var cans = can.getContext('2d');
cans.rotate(-20*Math.PI/180); //画布里面文字的旋转角度
cans.font = "16px Microsoft JhengHei"; //画布里面文字的字体
cans.fillStyle = "rgba(17, 17, 17, 0.50)";//画布里面文字的颜色
cans.textAlign = 'left'; //画布里面文字的水平位置
cans.textBaseline = 'Middle'; //画布里面文字的垂直位置
cans.fillText(str,can.width/3,can.height/2); //画布里面文字的间距比例
body.style.backgroundImage="url("+can.toDataURL("image/png")+")"; //把画布插入到body中
}
//调用这个方法即可
WaterMarker("水印文字");
</script>

html 页面内加水印效果相关推荐

在Java生成的html页面加水印,Java在Excel中添加水印的实现(单一水印、平铺水印)...
在Excel中没有直接添加水印的功能,但依旧可以通过一定方式来实现类似水印效果.本文通过Java程序代码介绍具体实现方法.可添加单一水印效果,即水印是以单个文本字样来呈现:也可添加多个平铺水印效果,即 ...
微信小程序第五篇：页面弹出效果及共享元素动画
系列文章传送门: 微信小程序第一篇:自定义组件详解微信小程序第二篇:七种主流通信方法详解微信小程序第三篇:获取页面节点信息微信小程序第四篇:生成图片并保存到手机相册目录一.page-caon ...
work02_vue页面打印水印
前言项目生成公司水印是很普遍的需求,下面是vue项目生产水印的方法.话不多说,复制粘贴就可以马上解决你的需求 ①. vue页面打印水印[一] ①. 创建watermark.js文件 /** 水印添加 ...
Asp.net(C#)给图片加上水印效果(转自园上的Seven Eleven)
Asp.net(C#)给图片加上水印效果 private void Btn_Upload_Click(object sender, System.EventArgs e) { ...
ScrollMagic – 酷毙了！超炫的页面滚动交互效果
ScrollMagic 是一款 jQuery 插件,它让你可以像使用进度条一样使用滚动条.如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插 ...
gdiplus 水印_Delphi程序的应用GDI+制作水印效果图片
利用GDI+可以很方便的制作带水印效果的图片,网上介绍这方面的文章也很多,但鲜有Delphi的,本文参照网上文章http://www.codeproject.com/KB/GDI-plus/water ...
WPF实现TextBox水印效果
原文:WPF实现TextBox水印效果在日常项目中,一个TextBox需要输入用户名,我们通常的做法是先用一个TextBlock来说明,例如下面的截图: 今天将使用另外一种方式来展示,使用水印的方式 ...
利用css和js实现页面的标签效果。(标签个数可以动态变化)
利用css和js实现页面的标签效果 css <style> .menu{ margin-bottom:-15px;width: 800px; } .menu li{ display:blo ...
android 滑动缩放监听,基于Android的ViewPager动画特效实现页面左右滑动效果(实现缩放...
基于Android的ViewPager动画特效实现页面左右滑动效果(实现缩放基于Android的ViewPager动画特效实现页面左右滑动效果(实现缩放和透明效果) 在上一个项目的基础上做修改,项目 ...

html 页面内加水印效果

html 页面内加水印效果相关推荐

最新文章

热门文章