JS前端使用canvas编写一个签名板
目录
- 需求
- 方案分析canvas
- 涉及知识点
- 代码
- 以上代码，未开发的点
需求
需求是做不完了，福利也被砍了，旅游也泡汤了，手上有2个需求，还没做完，PM就来新需求了。
开发一个签名板：要求PC端/移动端都能用、扫码签名、实时同步、可以改变笔画粗细、笔画颜色、可以生成base64图片。
方案分析canvas
1.获取页面[canvas]元素，设置宽高（800*200）
2.通过**HTMLCanvasElement.getContext()** 方法返回[canvas] 的上下文ctx
3.初始化ctx基础属性
- 线条颜色
- 线条宽度
- 线条末端形状
4.开始绘画
- 监听鼠标事件
- 绘制起点、终点
5.生成一个移动端链接二维码
6.在移动端签名时，通过WebSocket，实时传递数据给PC端。
涉及知识点
Canvas涉及特性：
- 基本属性
getContext()
strokeStyle
fillStyle
lineCap
lineJoin
- 路径绘制
beginPath()
lineTo()
moveTo()
- 其他方法（生成base64，清除画板）
toDataURL()
clearRect()
涉及鼠标事件：
mousemove
mousedown
mouseup
mouseout
涉及移动端触摸事件：
touchstart
touchend
touchmove
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>canvas-sign</title>
<style>
html,
body {
margin: 0;
}
.container {
width: calc(100vw - 40px);
height: calc(100vh - 40px);
padding: 20px;
}
.canvas-body {
width: calc(80vw);
height: calc(80vh);
margin: 20px auto;
}
#sign {
background-color: #f3f5f7;
border-radius: 4px;
border: 1px dashed #0F6BFF;
}
#img {
margin: 20px;
border-radius: 4px;
background-color: #f3f5f7;
display: none;
}
#img.show {
display: inline-block;
}
.btns {
width: calc(80vw - 40px);
text-align: right;
margin: 0 auto;
}
@media screen and (orientation: portrait) {
.qrcode {
display: none;
}
}
</style>
<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
</head>
<body>
<div class="container">
<div id="canvas-body" class="canvas-body">
<canvas id="sign" style="width: 100%; height: 100%;"></canvas>
<div class="qrcode">
扫码签名
<div id="qrcode"></div>
</div>
</div>
<div class="btns">
<button id="reset">重置</button>
<button id="showImg">生成图片</button>
</div>
</div>
<div id="img">
</div>
<script>
let canvasBody = document.getElementById('canvas-body');
let canvas = document.getElementById('sign');
let reset = document.getElementById('reset');
let showImg = document.getElementById('showImg');
let img = document.getElementById('img');
canvas.width = canvasBody.clientWidth;
canvas.height = canvasBody.clientHeight;
let ctx = canvas.getContext('2d');
ctx.lineWidth = 10;
ctx.strokeStyle = '#333';
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
let isDrawing = false;
let dataURL = '';
let initX;
let initY;
// 事件监听
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
initX = e.offsetX;
initY = e.offsetY
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
// 绘制
function draw(e) {
if (!isDrawing) return
ctx.beginPath();
// 起点
ctx.moveTo(initX, initY);
// 终点
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
initX = e.offsetX;
initY = e.offsetY
}
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (dataURL) {
dataURL = '';
img.innerHTML = '';
img.classList.remove('show');
}
}
function canvasToBase64() {
dataURL = canvas.toDataURL();
// let oGrayImg = new Image();
// oGrayImg.src = dataURL;
// img.classList.add('show');
// img.appendChild(oGrayImg)
alert(`${dataURL}`)
}
reset.addEventListener('click', clear);
showImg.addEventListener('click', canvasToBase64);
</script>
<script>
let qrcode = new QRCode(document.getElementById('qrcode'), {
width: 96,
height: 96
})
qrcode.makeCode('https://canvas-sign.vercel.app/');
</script>
</body>
</html>
以上代码，未开发的点
- 移动端触摸事件，禁止移动端屏幕，修改笔画粗细、笔画颜色
- 实时同步WebSocket
- 实时同步笔画时，如何让笔画有实时同步一笔一画的效果？下图
以上就是JS前端使用canvas编写一个签名板的详细内容，更多关于JS canvas签名板的资料请关注我们其它相关文章！
相关推荐
-
vue使用canvas实现移动端手写签名
基于vue使用canvas实现移动端手写签名! 之前自己开发有这么一个需求,需要实现手写签名,然后以图片的形式保存生成图片的base64数据流 .自己在网上找了一堆,都不是很完美.然后参考网上的加自己的优化和修改做了一版.希望有需要的朋友可以拿来直接用. HTML部分: <template> <div class="hello" > <div>请输入您的签名7:</div> <canvas id="canvas"
-
JavaScript canvas实现环形渐变进度条
最近有个需求要做环形渐变色进度条,去网上找了半天没找到合适的,大多数渐变色都是径向渐变,所以自己用canvas写了个环形渐变的图: 这个渐变其实就是把圆环分成许多小块分别绘制的,所以小块分的越多,渐变色越均匀,但是当圆环尺寸比较小的时候,边缘特别毛糙,需要适当减少份数,代码里是用unit 这个变量手动控制的,算是一个缺陷吧. 代码在此: <!DOCTYPE html> <html> <head> <style>
-
基于JS+Canvas的lucky-canvas 抽奖功能
目录 ucky-canvas 介绍 lucky-canvas 功能特点 自由配置 多端适配 响应式 代码块展示 效果图展示 代码如下 抽奖一 抽奖二 抽奖三 ucky-canvas 介绍 一个基于 Js + Canvas 的[大转盘 & 九宫格 & 老虎机]抽奖, 致力于为 web 前端提供一个功能强大且专业可靠的组件, 只需要通过简单配置即可实现自由化定制, 帮助你快速的完成产品需求. lucky-canvas 功能特点 自由配置 奖品 / 文字 / 图片 / 颜色 / 按钮均可自由配置
-
基于canvas实现手写签名（vue）
最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣.就自己基于vue写了一个简易的手写签名demo. 其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstart和touchmove事件进行监听.当监听touchstart事件被触发时,我们开始触发canvas里的beginPath事件并且设置moveTo原始点.当监听touchmove事件则去不断去触发lineTo事件,最后stroke(). demo里还有清除签名和保存签名的功能,分别对应了clearR
-
JS使用canvas绘制旋转风车动画
使用canvas绘制动画-旋转风车加速减速启动停止. 结果截图详见如下: 源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <
-
vue+canvas实现移动端手写签名
本文实例为大家分享了vue+canvas实现移动端手写签名的具体代码,供大家参考,具体内容如下 <template> <div class="sign"> <div class="header"> <i class="el-icon-arrow-left backImg" @click="goBack"></i> <span class="title&
-
JavaScript canvas实现水球加载动画
本文实例为大家分享了canvas实现水球加载动画的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas实现水球加载动画</title> <style> body { display:flex;
-
JS前端使用canvas编写一个签名板
目录 需求 方案分析canvas 涉及知识点 代码 以上代码,未开发的点 需求 需求是做不完了,福利也被砍了,旅游也泡汤了,手上有2个需求,还没做完,PM就来新需求了. 开发一个签名板:要求PC端/移动端都能用.扫码签名.实时同步.可以改变笔画粗细.笔画颜色.可以生成base64图片. 方案分析canvas 1.获取页面[canvas]元素,设置宽高(800*200) 2.通过**HTMLCanvasElement.getContext()** 方法返回[canvas] 的上下文ctx 3.初
-
JS前端使用canvas搞一个手势识别
目录 前言 具体步骤 第一步:手势绘制 第二步:重新取样 第二步:平移 第三步:旋转 第四步:缩放 第五步:手势录入 第六步:比较(重点) 注意事项 比较的基本套路(可跳过) 关于多笔画(可跳过) 小结 前言 最近在看一些关于图形学的东西,写了个一笔画手势识别的小 demo,效果大概是下面这个样子: 如果你是初次看过肯定会觉得很有意思
-
JS前端使用Canvas快速实现手势解锁特效
目录 前言 Demo 需要实现的功能 初始化数据和页面渲染 touchstart 手指开始触摸事件 touchmove 监听手指滑动事件 touchend 监听手指触摸结束事件 页面滚动处理 连接的两颗星星之间有其他星星时 前言 之前在公司开发活动项目的时候,遇到一个项目需求要让用户使用手势画星位图来解锁星座运势,一看设计稿,这不就是我们平时的手机屏幕解锁吗?于是上网搜了一些关于手势解锁的文章,没找到可以直接复用的,于是只能自己打开canvas教程,边学习边设计实现了这个功能,同时兼容了移动端和
-
JS前端基于canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现图片添加水印的实现方法. canvas元素其实就是一个画布,我们可以很方便地绘制一些文字.线条.图形等,它也可以将一个img标签里渲染的图片画在画布上. 在上传文件到后端的时候,使用input标签读取用户本地文件后得到的其实是一个Blob对象(更精确的说是File对象,特殊的Blob对象):而在页面
-
JS前端使用canvas动态绘制函数曲线示例详解
目录 前言 第一步:绘制坐标系 1.如何确定 x 轴和 y 轴的边界值 2.不是传入多少网格数就是多少网格 3.如何让坐标原点位于画布中心 4.刻度总是会有浮点数 第二步:画函数曲线 第三步:绘制辅助线和交点坐标 第四步:平移 第五步:缩放 第六步:动态绘制曲线 第七步:模糊到高清 前言 不说废话,我们直入主题.先来看看读了这篇文章你将得到什么,就是下面这个东西啦(是不是很清晰很顺滑): 那具体要做什么呢,我们来简单拆解一下步骤: 绘制坐标系 绘制多条函数曲线 绘制辅助线和坐标点 支持平移.缩放
-
JS前端使用canvas实现物体的点选示例
目录 前言 hover 的实现 click 的实现 矩形的坐标哪来的 点在多边形内的其他判断方法 穿透 本章小结 前言 上个章节中我们已经给物体加上了被选中的效果,现在可以上点交互了,这个章节主要实现的就是物体的 hover 和 click 事件,当鼠标 hover 到物体上时,我们会改变鼠标的样式使其变成移动的样子: 当 hover 到控制点时则会变成对应的操作样式: 当 click 物体时,会将物体变成激活态,也就是展示边框和控制点.话不多说,直接开撸 hover 的实现 首先我们来处理鼠标
-
JS前端可视化canvas动画原理及其推导实现
目录 前言 动画的本质 动画的实现 动画的推导 小结 前言 到目前为止我们的 fabric.js 雏形已经有了,麻雀虽小五脏俱全,我们不仅能够在画布上自由的添加物体,同时还实现了点选和框选,并且能够对它们做一些变换,不过只有变换这个操作还不够灵活,要是能够让物体动起来就好了,于是就引入了这个章节的主题:动画,以及动画最核心的一个问题,如何保证在不同的电脑上达到同样的动画效果?然后说干就干,立马开撸. 虽然我写的是系列文章,但每个章节单独食用是木问题的,所以,请放心大胆的看
-
JS前端使用canvas实现扩展物体类和事件派发
目录 前言 FabricImage 图片类 事件派发 小结 前言 虽然我们讲了这么多个章节,但其实目前为止就只有一个 Rect 类能用,略显单调.于是乎,为了让整个画布稍微生动一些,这个章节我们来尝试增加一个图片类,如果你以后需要扩展一个物体类,也是用同样的方法. 另外有时候我们还希望在物体属性改变时或者画布创建后做一些额外的事情,这个时候事件系统就派上用场啦,也就是我们常说的发布订阅,我觉的这是前端应用最广的设计模式没有之一了
-
JS前端绘图canvas模糊问题示例高清图解
目录 缘起 模糊的原因 1.canvas 的大小和 css 的大小不一致 2.当绘制的东西不足 1px,会自动补足 1px 3.受到高清屏的影响 结语 缘起 模糊在 canvas 中应该算是个经典问题了,相信大家也曾经看过很多相关文章,但总是记不住,因为概念很多,描述的也不够明确,所以我就自己总结了一篇,刨去了复杂概念,顺带画了几张高清图,以此加深理解(我觉得画的贼好,记不住就来打我). 模糊的原因 总的来说模糊的原因大致可分为以下三点: 1.canvas 的大小和 css 的大小不一致 首先让
-
JQuery入门—编写一个简单的JQuery应用案例
一.官方网站下载:http://jquery.com 二.引入JQuery文件库 下载完后不用安装,只需将文件导入页面中即可,即在<head></head>中加入如下代码:<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"></script> 三.编写一个弹出对话框的简单应用. 复制代码 代码如