小程序canvas实现签名功能，封装canvas签名功能组件

最新推荐文章于 2025-09-24 16:20:18 发布

原创

最新推荐文章于 2025-09-24 16:20:18 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍如何在小程序中实现canvas签名功能，通过封装canvas组件，详细讲解wxml、wxss和js代码实现过程，并展示父组件如何调用这个签名组件。遵循小程序官方文档建议，使用canvas-2d进行签名功能的实现。

小程序canvas实现签名功能，封装canvas签名功能组件

刚刚接触小程序，因为项目需求，有签名功能研究了很久，网上也找了不少资料，最终实现了canvas签名功能，并封装成可用组件

canvas组件代码

wxml

<view class="wrapper">
	<view class="back" catchtap="back">返回</view>
	<view class="handBtn">
		<button catchtap="cleardraw" class="delBtn">清空</button>
		<button catchtap="getimg" class="subBtn">完成</button>
	</view>
	<view class="handCenter">
		<canvas class="canvas"
			id="canvas"
			canvas-id="canvas"
			disable-scroll="true"
			bindtouchstart="canvasStart"
			bindtouchmove="canvasMove"
			binderror="canvasIdErrorCallback"></canvas>
		<cover-image class='overImg' src="{
  
  {src}}" wx:if="{
  
  {src!=''}}"></cover-image>
	</view>
</view>