h5 实现画图手写签批功能

太久没更新博客了，又不知道写些什么。最近看到支付宝上的手写签批功能，就想着自己用h5实现了。

写完了后发现太简单了，就加上了写以前window 画图软件的功能。

以下为源码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hb</title>
</head>
<style>html, body {width: 100%;height: 100%;margin: 0;}.m {width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}.zt {height: 70%;width: 70%;border: #767070 solid 1px;}.content {margin-top: 1px;margin-left: 1px;width: calc(100% - 2px);height: calc(100% - 2px);}.content div {width: 1px;height: 1px;float: left;}
</style>
<body>
<div class="m"><div id="color" style="display: flex;padding-bottom: 10px"></div><div style="display: flex;padding-bottom: 10px"><div onclick="qk()">清空</div><div style="margin-left: 30px" onclick="xpc()">橡皮擦</div><div style="margin-left: 30px" onclick="down()">下载</div></div><div class="zt"><canvas id="hb" class="content" onmousemove="move()"></canvas></div>
</div>
</body>
<script>let ys = []ys.push('#f44336')ys.push('#e91e63')ys.push('#9c27b0')ys.push('#673ab7')ys.push('#3f51b5')ys.push('#2196f3')ys.push('#00bcd4')ys.push('#009688')ys.push('#8bc34a')ys.push('#ffeb3b')ys.push('#ff9800')ys.push('#ff5722')ys.push('#9e9e9e')ys.push('#607d8b')ys.push('#000000')for (let color of ys) {let par = document.getElementById("color")let d = document.createElement("div")d.style = 'background:' + color + '; margin-left: 10px;width: 20px;height: 20px;'d.color = colord.addEventListener('click', function () {cxt.strokeStyle = colorxp = false})par.appendChild(d)}let elementById = document.getElementById("hb")let cxt = elementById.getContext("2d")elementById.width = elementById.offsetWidthelementById.height = elementById.offsetHeightlet lastx = 0let lastY = 0let h = falselet xp = falsefunction move(event) {let e = event || window.event;if (e.buttons === 1) {let ox = e.offsetX;let oy = e.offsetY;if (h) {if (xp) {let m = Math.max(Math.abs(lastY - oy), Math.abs(lastx - ox))let x1 = (ox-lastx)/mlet y1 = (oy-lastY)/mfor (let i=0;i<m;i++){cxt.clearRect(lastx+i*x1-5, lastY+i*y1-5, 10, 10)}} else {cxt.beginPath()cxt.moveTo(lastx, lastY)cxt.lineTo(ox, oy)cxt.stroke()}}lastx = oxlastY = oyh = true} else {if (h) {cxt.save()}h = false}}function qk() {cxt.clearRect(0, 0, elementById.width, elementById.height)}function xpc() {xp = true// cxt.strokeStyle = '#ffffff'}function down() {let url = elementById.toDataURL('image/png');// base64数据let a = document.createElement("a")a.download = "sxqp.png"a.href = urla.click()}
</script>
</html>

我是写后端的，只是java的图形化界面实在不安逸

h5 实现画图手写签批功能相关推荐

android 手写签批_Android手写签批功能实现（适配Android6
Android手写签批功能的实现在于三个点,mupdf,偏移量的计算,droidText0.5.jar 实际步骤: 使用muPdf将PDF加载出来弹出透明的popwindow,popWindow使用 ...
Android手写签批功能实现（适配Android6.0及以上）
Android手写签批功能的实现在于三个点,mupdf,偏移量的计算,droidText0.5.jar 实际步骤: 使用muPdf将PDF加载出来弹出透明的popwindow,popWindow使 ...
开源O2OA办公平台：手写签批介绍
概述手写签批是建立在O2OA开发平台的公文编辑器组件基础上,允许用户在公文内容上进行手写.签名.批注.文字输入.擦除的一系列功能.手写签批功能可以直观的展现每位处理人对公文内容的批注,有效的提高办公 ...
苏菲surface平板手写签批办公系统
微软推出surface至今已经有好几年了,其与PC电脑的操作方式一致,使得不少单位将其定义为生产力工具.新版本不断更新换代,使得其性价比越来越高.配合win 10的操作系统,操作体验虽然比不上macb ...
php 手写签批手机办公_手写签批打造无纸化办公的完美替代
无纸办公,低碳环保,是近些年办公市场呈现的趋势,许多企业都开始推广OA办公系统来进行公文流转,传统的纸制办公转变为无纸化办公,极大提升了企业的运作效率. 随着科技发展,办公信息化也在与时俱进,许多原本 ...
vue 手写签名_与众不同的手写签批
随着移动互联网+时代的到来,手机成了我们日常生活中不可缺少的必备用品,它不仅仅是一个通讯工具,更是一台移动电脑.因此越来越多的单位把希望在手机上就能完成业务的处理,但也希望能还原线下办理的效果.因此, ...
android 手写签批_Android自定义View——手写签批
接到一个领导批示保留原笔迹的功能,类似于绘画板,用户打开后可以绘制,点击完成后以图片的形式保存在本地,并且显示绘制后图片,上传服务器,达到保留原笔迹的目的.可以运用于签字.审批等. 效果图: 手写签批 ...
Java 开源开发平台 O2OA V7.1.0 发布，人力资源办公平台及手写签批上线
O2OA V7.1.0发布,新增了[人力资源办公平台]和版式公文中的[手写签批]功能. [人力资源办公平台]是使用O2OA开发平台设计并开发的一套适合于人力资源管理的办公系统.该平台将人力资源管理的所 ...
android 手写签批_Android自定义实现手写签名功能
一.Android自定义View步骤 : 自定义属性: 选择和设置构造方法: 重写onMeasure()方法: 重写onDraw()方法: 重写onLayout()方法: 重写其他事件的方法(滑动监听 ...

h5 实现画图手写签批功能

h5 实现画图手写签批功能相关推荐

最新文章

热门文章

h5 实现 画图 手写签批功能

h5 实现 画图 手写签批功能相关推荐

最新文章

热门文章

h5 实现画图手写签批功能

h5 实现画图手写签批功能相关推荐