Vue添加全局水印

水印毫无疑问当然是canvas画图,全局水印 = 将canvas水印DOM定位挂载在document.body上,可以理解为在当前可视窗口最上方盖了一层层级较高的蒙版,这个蒙版就是水印// water-market.js// 水印内容较长可以设置can的width,height属性 // water-market.js // 水印内容较长可以设置can的width,height属性 const

- 阅读全文 -

Vue + SignaturePad(canvas)实现移动端手写签名

​移动端下业务需要全屏手写签名,需求:兼容横竖屏,无论横竖屏下,签字图都需要是横向显示: 插件SignaturePad一、思路分析:1 . 移动H5虽可以判断横竖屏,但考虑到多设备访问问题(微信下,有的手机需要用户开启横屏模式才可以旋转,一般人不知道怎么设置),所以强制横屏显示只能放弃。2 . 无法强制横屏,那么我们是否可以通过CSS将页面旋转达到视觉横屏效果呢? 答案当然是可以,通过 tran

- 阅读全文 -

html2canvas实现网页截图,长按保存

传送门: https://github.com/Jensonhui/html2canvas-to-img核心代码 let shareContent = document.getElementId('your el id'), //需要截图的包裹的(原生的)DOM 对象 width = shareContent.clientWidth, //shareContent.o

- 阅读全文 -

Canvas流星雨背景

每日鸡汤: 我不会告诉你,只要你努力,就能立刻逆袭。我只想告诉你,只要你努力,我们都能做一个独一无二的,平凡却可贵的自己。千错万错,你的付出不会有错。所以,年轻人啊,你一定一定要很努力,但千万千万别心急。查看效果:http://test.jensonhui.top/meteorShower.html<!DOCTYPE html> <html lang="en"

- 阅读全文 -

Canvas基于Three.js 绘制流星雨穿梭

每日鸡汤:不同的人生,有不同的幸福。去发现你所拥有幸运,少抱怨上苍的不公,把握属于自己的幸福。你,我,我们大家都可以经历幸福的人生。演示地址:http://test.jensonhui.top/canvas/starMoving.html<!DOCTYPE HTML> <html lang="en"> <head> <title

- 阅读全文 -

Canvas绘制圆形进度条

每日鸡汤:只有启程才会到达理想和目的地,只有播种才会有收获。只有追求,才会品味堂堂正正的做人,只有保留一份单纯,才会多些人生的快乐!演示地址:http://test.jensonhui.top/progress.html<!DOCTYPE html> <html lang="en"> <head> <meta charset=&

- 阅读全文 -