原生js实现水印背景

参考文档：https://juejin.cn/post/6844904095749242888

/*1.通过canvas生成水印图片2.把图片作为div的背景让其平铺
*/
const setWatermark = () => {let canvas = document.createElement('canvas');canvas.width = 120;canvas.height = 80;canvas.style.border = '1px solid red';let ctx = canvas.getContext('2d');ctx.rotate(-30 * Math.PI / 180);ctx.font = '15px Vedana';ctx.fillStyle = '#444'ctx.fillText('这是一个水印', 10, 70);let div = document.createElement('div');div.style.pointerEvents = 'none';div.style.top = '0px';div.style.left = '0px';div.style.opacity = '0.2';div.style.position = 'fixed';div.style.width = document.documentElement.clientWidth + 'px';div.style.height = document.documentElement.clientHeight + 'px';div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat';let a = document.createElement('a');a.innerText = '参考文档：https://juejin.cn/post/6844904095749242888';a.href = 'https://juejin.cn/post/6844904095749242888';let docFragments = document.createDocumentFragment();docFragments.appendChild(a);for (let i = 0; i < 100; i++) {let divs = document.createElement('div');divs.innerText = '我是一个滚动文字' + i;docFragments.appendChild(divs);}docFragments.appendChild(div);document.body.appendChild(docFragments);
}setWatermark();

效果：

原生js实现水印背景相关推荐

原生JS实现全屏视频背景滚动淡出
给大家分享一个用原生JS实现全屏视频背景滚动淡出,效果如下 : 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en&qu ...
原生js代码编写钟表
原生js代码编写钟表利用js中的定时器编写: 直接上代码: <!DOCTYPE html> <html><head><meta charset=" ...
原生遍历_细品原生JS从初级到高级知识点汇总（三）
作者:火狼1 转发链接:https://juejin.im/post/5daeefc8e51d4524f007fb15 目录细品原生JS从初级到高级知识点汇总(一) 细品原生JS从初级到高级知识点汇 ...
java使用重绘实现拖动_原生JS使用Canvas实现拖拽式绘图功能
一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方j ...
dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
js检测鼠标是否在操作_原生JS趣味demo：炫酷头像鼠标追随效果的实现
我们常在一些网页中可以看到鼠标追随效果一个简单的图片.动画甚至一小段文字都可以作为鼠标跟随的载体之前咱们的直播课中老师也讲过相关的canvas追随粒子特效今天就让我们一起来用原生js ...
原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...
前端每日实战：163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏（内含 3 个视频）...
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LXMzRX 可交互视频此视频是可 ...

原生js实现水印背景

原生js实现水印背景相关推荐

最新文章

热门文章