使用Canvas实现网页鼠标签名效果

电脑签名效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>签名</title><style>* {margin: 0;padding: 0;}#canvas {border: 1px solid black;}</style><script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script><script type="text/javascript" src="./js/xadmin.js"></script><script type="text/javascript" src="./data/sensor.js"></script><script src="js/jquery.min.js"></script>
</head>
<body>
<div class="container"><fieldset class="layui-elem-field" style="width: 610px; margin-left: 5px;"><legend style="font-size: 12px;">预览</legend><div class="layui-field-box"><div class="imgs" id="imgs"><img id="imgOld" src="" style="height: 50px; width: 200px;"/></div></div></fieldset><canvas id="canvas" width="610px"  height="280px" style="margin-left: 5px;" ></canvas><div><button id="clear">清空签名</button>线条粗细<select id="selWidth"><option value="2">2</option><option value="4">4</option><option value="6">6</option><option value="9">9</option></select>线条颜色<select id="selColor"><option value="red">red</option><option value="blue">blue</option><option value="pink">pink</option><option value="orange">orange</option></select><button id="imgInfo">保存签名</button></div><!--    <div class="imgs" id="imgs"></div>-->
</div></body>
<script type="text/javascript">//1.获取canvasvar myCanvas = document.getElementById("canvas");//获取2d对象var ctx = myCanvas.getContext("2d");//清空画布var clear = document.getElementById("clear");//线条var selWidth = document.getElementById("selWidth");// 颜色var selColor = document.getElementById("selColor");// 保存签名var imgInfo = document.getElementById("imgInfo");// 保存的盒子var imgs = document.getElementById("imgs");//控制线条是否画var isMouseMove = false;//线条位置var lastX, lastY;var widthVal = selWidth[0].value, colorVal = selColor[0].value;window.onload = function () {initCanvas();};//初始化function initCanvas() {//PC端var down = (e) => {isMouseMove = true;drawLine(event.pageX - myCanvas.offsetLeft,event.pageY - myCanvas.offsetTop,false);};let move = (e) => {if (isMouseMove) {drawLine(event.pageX - myCanvas.offsetLeft,event.pageY - myCanvas.offsetTop,true);}};let up = (e) => {isMouseMove = false;};let leave = (e) => {isMouseMove = false;};myCanvas.addEventListener("mousedown", down);myCanvas.addEventListener("mousemove", move);myCanvas.addEventListener("mouseup", up);myCanvas.addEventListener("mouseleave", leave);}//画线function drawLine(x, y, isT) {if (isT) {ctx.beginPath();ctx.lineWidth = widthVal; //设置线宽状态ctx.strokeStyle = colorVal; //设置线的颜色状态ctx.lineCap = 'round'ctx.lineJoin = "round";ctx.moveTo(lastX, lastY);ctx.lineTo(x, y);ctx.stroke();ctx.closePath();}// 每次移动都要更新坐标位置lastX = x;lastY = y;}//清空画图function clearCanvas() {imgs.innerHTML = ""ctx.beginPath();ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);ctx.closePath(); //可加入，可不加入}//线条粗细function lineCrude() {let activeIndex = selWidth.selectedIndex;widthVal = selWidth[activeIndex].value;}//改变颜色function setColor() {let activeIndex = selColor.selectedIndex;colorVal = selColor[activeIndex].value;}//保存图片function saveImgInfo() {var images = myCanvas.toDataURL('image/png');imgs.innerHTML = `<img id="image1" src='${images}'>`uploadAutograph();}clear.addEventListener("click", clearCanvas);selWidth.addEventListener("change", lineCrude);selColor.addEventListener("change", setColor);imgInfo.addEventListener("click", saveImgInfo);function dataURLtoFile(dataurl, filename) {var arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]),n = bstr.length,u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type:mime});}//上传签名function uploadAutograph(imgData) {let formData = new FormData();let imagesName=new Date().getUTCMinutes()+".png";let fileData=document.getElementById('image1');let fileOfBlob=dataURLtoFile(fileData.src,imagesName);formData.append("file",fileOfBlob);let url=sensorServer.getUploadFileUrl1();$.ajax({url:url,type:"post",data:formData,processData:false,contentType:false,success:function(data){console.log(JSON.stringify(data));if(data.msg=="操作成功"&&data.data!=null){let uploadSuccessData=data.data;if(uploadSuccessData!=null) {let fileName=imagesName ; //;document.getElementById('file_1').files[0].name;let serverUrl=uploadSuccessData.url;let params={"fileUrl":serverUrl,"fileName":fileName};let parm={"id":curInfo.id,"autographAttachmentId":uploadSuccessData.attachmentId};let result=sensorServer.updateAccount(parm);//上传保存数据逻辑if(result==1){layer.alert("上传成功！", {icon: 6},function () {//关闭当前framexadmin.close();// 可以对父窗口进行刷新xadmin.father_reload();});} else{layer.alert("上传失败！", {icon: 6},function () {//关闭当前framexadmin.close();// 可以对父窗口进行刷新xadmin.father_reload();});}}else{layer.msg("保存失败！");}}else{alert(JSON.stringify(data));layer.msg("上传失败！");}},error:function(e){alert("错误！！");}});}function getQueryVariable(variable){var query = window.location.search.substring(1);var vars = query.split("&");for (var i=0;i<vars.length;i++) {var pair = vars[i].split("=");if(pair[0] == variable){return pair[1];}}return(false);}var curInfo;$(function () {let pid = getQueryVariable("id");var  accountInfo = sensorServer.getAccountInfoById({"id": parseInt(pid)});curInfo=accountInfo;if(curInfo.autographAttachmentUrl!=null&&curInfo.autographAttachmentUrl!=""){$("#imgOld")[0].src=curInfo.autographAttachmentUrl;}});
</script>
</html>

使用Canvas实现网页鼠标签名效果相关推荐

使用Canvas 实现手机端签名
这是继上一篇文章后的补充: 上一篇使用canvas 实现网页端签名 //初始化function initCanvas2() {let offset = myCanvas.getBoundingCl ...
炫酷canvas网页背景动画效果
下载地址非常炫酷的网页背景旋转特效,基于canvas画布实现的网页背景动画效果 dd:
用Canvas画布展示出3D效果的网页源码
大家好,今天给大家介绍一款,用Canvas画布展示出3D效果的网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 每次点击页面中间的卡片,就会触发3d旋转特效(图2) 图2 源码预览, < ...
js检测鼠标是否在操作_原生JS趣味demo：炫酷头像鼠标追随效果的实现
我们常在一些网页中可以看到鼠标追随效果一个简单的图片.动画甚至一小段文字都可以作为鼠标跟随的载体之前咱们的直播课中老师也讲过相关的canvas追随粒子特效今天就让我们一起来用原生js ...
网页鼠标点击特效案例收集(直播间红心同理)
1. 鼠标点击出随机颜色的爱心 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
canvas实现点线动画效果
效果图需求分析点随机产生并向随机方向以随机的速度匀速移动未点击时,点的总数保持不变:点击时在点击的位置产生数个新的点点与点之间在一定距离内有细线连接鼠标在画面中移动时,能够与其他点产生互动 ...
html 鼠标悬停效果,30个帅气的鼠标悬停效果
30个帅气的鼠标悬停效果 3月 26, 2015 评论 (1) Sponsor 在网页设计中,鼠标悬停效果常用于文字链接.产品图片.按钮等地方,然而随着CSS3的强大,鼠标Hover效果可以变得有更多 ...
（翻译）链接需要鼠标悬停效果的原因
链接虽然包含文本,但绝不应与普通文本混为一谈.用户浏览网页时,要能区分哪些内容可以点击.如果链接没有足够的对比度,用户可能会忽略它们. 颜色不适用于色盲用户大部分网站用颜色区分链接和普通文本 ...

使用Canvas实现网页鼠标签名效果

使用Canvas实现网页鼠标签名效果相关推荐

最新文章

热门文章