JS签字板（基于canvas）

it2026-04-02 6

Canvas签字画图板

需求：

需要开发一个移动端的手写板，要求是类似于签字版，于是就想到了使用canvas着手做一个满足业务需求。注：本次实现的canvas签字版主要用于手机端网页，若用于PC端网页请自行对事件函数以及相应代码做对应的修改。

效果图：

实现代码：

* { margin: 0; padding: 0; } html { overflow: hidden; overflow-y: auto; } #app { width: 100vw; height: 100vh; background-color: #ffffff; } /* 白板style */ div.bb-center { width: 100vw; height: 100vh; top: 0; bottom: 0; position: fixed; background-color: rgba(0, 0, 0, 0.2); z-index: 10; font-size: 0.3rem; visibility: hidden; } /* 显示画板 */ div.bb-center.active { visibility: visible; } .bbc-top { box-sizing: border-box; height: 0.8rem; padding: 0.1rem 0.24rem; width: 100%; background-color: #fff; display: flex; justify-content: space-between; align-items: center; } .bbc-top>div { padding: 0.1rem 0.3rem; font-size: 0.28rem; color: #ffffff; background: rgba(243, 125, 125, 1); border-radius: 0.1rem; } .bbc-view { width: 100vw; height: calc(100vh - 0.8rem); } .bbc-view>canvas { width: 100%; height: 100%; }

注：html 页面布局使用的 rem 布局，根字体大小是 50px。

<html> <head></head> <body> <div id="app"> <div class="bb-center" :class="{active:isShow}"> <div class="bbc-top"> <div @click="closeBB"> 关闭 </div> <div @click="clearBB"> 清空 </div> </div> <div class="bbc-view" ref="bbcView"> <canvas ref="canvas" :width="cvsWidth" :height="cvsHeight" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas> </div> </div>  <div class="wrap"> <button type="button" @click="openBB">打开画板</button> <h3>canvas手写板</h3> </div> </div> </body> </html> const vm = new Vue({ el: "#app", data: { cvsWidth: 0, cvsHeight: 0, isShow: false, ctx: "" // canvas对象 }, mounted() { this.initCanvas(); }, methods: { // 初始化canvas initCanvas() { let bbcView = this.$refs.bbcView; // 设置canvas的宽度和高度 this.cvsWidth = bbcView.offsetWidth; this.cvsHeight = bbcView.offsetHeight; let $cvs = this.$refs.canvas; if (!$cvs.getContext) return; // canvas基础设置 this.ctx = $cvs.getContext("2d"); this.ctx.beginPath(); }, // 画布的触摸移动开始手势响应 onTouchStart(e) { let offsetLeft = e.target.offsetLeft; // 获取canvas距离页面左边的距离 let offsetTop = e.target.offsetTop; // 获取canvas距离页面顶部的距离 let targetX = e.touches[0].clientX - offsetLeft; let targetY = e.touches[0].clientY - offsetTop; this.ctx.beginPath(); this.ctx.strokeStyle = "#000"; // 设置线条颜色 this.ctx.lineWidth = 3; // 设置线条的宽度 this.ctx.lineCap = "round"; // 设置线条的端点的样式，设为圆弧形 this.ctx.lineJoin = "round"; // 设置线条的连接点的样式，设为弧形 this.handleDraw(targetX, targetY); }, // 画布的触摸移动手势响应 onTouchMove(e) { let offsetLeft = e.target.offsetLeft; // 获取canvas距离页面左边的距离 let offsetTop = e.target.offsetTop; // 获取canvas距离页面顶部的距离 let targetX = e.touches[0].clientX - offsetLeft; let targetY = e.touches[0].clientY - offsetTop; this.handleDraw(targetX, targetY); }, // 画布的触摸移动结束手势响应 onTouchEnd(e) {}, // 打开白板 openBB() { this.isShow = true; // this.ctx.clearRect(0, 0, this.cvsWidth, this.cvsHeight); // // 重新设置canvas画板节点对象，否则绘画会出问题,这里异步操作，否则绘画有误 // setTimeout(() => { // this.initCanvas(); // }, 100); }, // 关闭白板 closeBB() { this.isShow = false; }, // 清空白板 clearBB() { //清除画布 this.ctx.clearRect(0, 0, this.cvsWidth, this.cvsHeight); }, // 绘制画笔 handleDraw(targetX, targetY) { this.ctx.lineTo(targetX, targetY); // 将笔触移到当前点击点 this.ctx.stroke(); } } });

注：本次使用的是基于 vue 开发的，若使用原生JavaScript开发，请自行对比修改。

最新回复(0)