效果图：

实现思路：

使用canvas来实现手写签名的功能，然后将canvas转化为图片

通过监听鼠标mousedown/mousemove/mouseup/mouseleave 来实现

html布局

  <div class="container"><canvas id="canvas" width="500" height="500"></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>

css样式：

* {margin: 0;padding: 0;
}
#canvas {border: 1px solid black;
}

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 src='${images}'>`}clear.addEventListener("click", clearCanvas);selWidth.addEventListener("change", lineCrude);selColor.addEventListener("change", setColor);imgInfo.addEventListener("click", saveImgInfo);

手机端canvas实现电子签名
小程序canvas生成海报

canvas实现电子签名相关推荐

手机端canvas实现电子签名
前言: 在上一篇文章中讲到了如何使用canvas在PC端实现电子签名,下面我们稍微修改一下代码在h5端也可以实现效果图: 实现思路: 使用canvas来实现手写签名的功能,然后将canvas转化为图 ...
使用vue造个小轮子vue-asign，canvas生成电子签名，满足需求
优化需求,内容是生成电子签名,发现好多个项目都重复写,于是打算自己造个小轮子,名字就叫vue-asign,说明文档如下: vue-asign Canvas 生成电子签名支持vue2.vue3 演示d ...
app canvas渲染后图片黑色_H5 基于 canvas 实现电子签名并生成PDF文档
(给前端大全加星标,提升前端技能) 转自:coyota666 https://juejin.cn/post/6901273585428463624 前言电子签名通俗来说就是通过技术手段实现在电子文档 ...
html5 canvas签字,HTML5 canvas实现电子签名
1.为什么要用到BASE64编码的图片信息Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一.Base64 主要不是加密,它主要的用途是把一些二进制数转成普通字符用于网络传输.由于一些 ...
Vue—使用canvas实现电子签名
前言实现签名的功能听着很复杂,其实很简单.使用canvas辅助的API和监听鼠标相关事件即可实现. 思考: 1.如何使用canvas画线 ? 2.如何判断在提交签名时判断是否有签名 ? 3.如何将c ...
H5基于canvas实现电子签名并生成PDF文档
关注公众号前端开发博客,回复"加群" 加入我们一起学习,天天进步作者:coyota666 链接:https://juejin.cn/post/69012735854284636 ...
h5 使用canvas实现电子签名和图片的保存
公司的业务表格登记需要使用上签名,所以做了一个电子签名的模块,网上看了很多相关资料,我选择使用jq 里面带有的签名功能,使用jq-signature.js来实现. 1.将jQuery和jq-signa ...
小程序 canvas 实现电子签名
其实随意搜索一下还是有很多先例的,只是有些比较坑得自己筛选. https://blog.csdn.net/qq_36875339/article/details/81086205 这篇文章真是好,以至 ...
从一个 bug 中延伸出 canvas 最大内存限制和浏览器渲染原理
本文作者:雨过天晴 https://zhuanlan.zhihu.com/p/540761999 前几天一个同事让我帮忙解决一个 bug,这个 bug 困扰他好几天了.这是一个 App 中的 Hybr ...
使用signature在移动端做电子签名canvas画板随触摸滚屏的bug
在做移动端项目的时候,如果页面需要滚动,而页面上有signature实现的电子签名,就会发现手写的时候canvas画板会随着手指的滑动而滚动,导致不能正常签名. 解决办法:在canvas标签上注册一个 ...

canvas实现电子签名

效果图：

实现思路：

html布局

css样式：

javascript：

canvas实现电子签名相关推荐

最新文章

热门文章