canvas 实现签名

用 canvas 实现签名。实现的思路是：

当鼠标指针按下的时候，记录点击的位置，并作为绘制的起点。
当鼠标移动的时候，进行路径的绘制。
当鼠标指针抬起的时候，取消鼠标移动的事件，结束路径的绘制。

使用 clearRect 方法清除画布，通过传入参数 ctx.clearRect(0, 0, canvas.width, canvas.height) 可以清除全部的画布区域。

<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;}canvas {box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);}.clear {width: 600px;height: 50px;border-radius: 10px;background-color: #E4E7ED;margin-top: 10px;font-size: 24px;text-align: center;line-height: 50px;cursor: pointer;}.clear:hover {background-color: #C0C4CC;}</style></head><body><canvas width="600" height="400" tabindex="0"> </canvas><div class="clear">清除画布</div><script>const canvas = document.querySelector("canvas");const ctx = canvas.getContext("2d");const clear = document.querySelector(".clear")// 监听鼠标进入 canvas, 监听鼠标指针按下和抬起canvas.addEventListener('mouseenter', () => {// 监听鼠标指针按下canvas.addEventListener('mousedown', (e) => {// 开始绘制路径ctx.beginPath()// 设置绘制的起点为当前点击的位置ctx.moveTo(e.offsetX, e.offsetY)// 监听键盘移动事件canvas.addEventListener('mousemove', draw)})canvas.addEventListener('mouseup', () => {// 移除鼠标移动事件canvas.removeEventListener('mousemove', draw)})})function draw(e) {// 绘制线ctx.lineTo(e.offsetX, e.offsetY)// 描边路径ctx.stroke()}clear.addEventListener('click', () => {// 清空画布ctx.clearRect(0, 0, canvas.width, canvas.height)})</script></body>
</html>

实现效果如下：

canvas 实现签名相关推荐

微信小程序canvas实现签名功能
微信小程序canvas实现签名功能在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场文章目录微信小程序canvas实现签名功能前言一.微信小程序canvas实现签 ...
Html里canvas签名板签名，签字内容还可以手动放大缩小移动
声明:这篇文章属于一个IT小白的我第一次发,技术内容引自网络.我只是一个搬运工和砖瓦工. 如果内容涉及侵权,请告知我可以删除文章.并且本代码属于技术交流无意涉嫌商业行为. [内容] 实现在线的PDF文 ...
移动端 canvas 横屏签名图片旋转
学习与前端实现电子签名是通过原生canvas实现,我这篇是对其进行了改造,记录一下效果图组件 components/esign.vue <template><div styl ...
canvas横屏签名，签名图片旋转90度生成base64
效果展示旋转原理 1.新建画布,画布长宽为图片较长边长的2倍 2.根据需要的旋转角度,确定旋转完之后需要复制图片的象限范围 3.对新建画布进行先移动(中心点位)后旋转处理 4.复制需要象限的图片 5 ...
canvas 裁剪签名图片去除多余的空白
var canvas = document.createElement("canvas"); canvas.width = sWidth; canvas.height = sHei ...
html5 签名,canvas在线签名插件Tablet
插件描述:Tablet是一个基于canvas的在线签名板! 更新时间:2021-04-28 22:33:31 更新说明: 1.支持回退操作 2.浏览器窗口大小改变自动重绘 3.删除了之前一些不合理的代 ...
vue canvas手绘签名
需求公司业务想要在手机端h5搞个签名需求.签名好像在哪里见到过:好像钉钉上请假时有个签名可以仿照写一个思路想法既然是绘制那想到的是用 canvas 或者svg 应该都可以既然canvas 或 ...
vue中canvas签名
vue用canvas横屏签名最近遇到一个签名需求由于canvas一些特性,横屏签名不好控制,也是多方借鉴才解决,写真就是为了记录下,方便有需要的同学. js代码如下: import Draw fro ...
微信小程序使用 canvas 实现手写签名
在使用微信小程序开发中,有的需求场景中会需要用户手写签名.或者绘制一些路径,通常会使用 canvas 来实现这种需求在小程序的开发官方文档中我们可以查找到相关的 canvas 接口使用方法,在文档中 ...

canvas 实现签名

canvas 实现签名相关推荐

最新文章

热门文章