✅作者简介：大家好我是瓜子三百克，励志成为全栈工程师的一枚程序猿，也是喜欢在学习和开发中记录笔记的小白博主！
个人主页：瓜子三百克的主页
系列专栏：uniapp前端
如果觉得博主的文章还不错的话，请点赞+收藏⭐️+留言支持一下博主哦爛
让我们一起卷起来吧！！！
画布可以做很多事情，比如可以绘图，也可以做海报。在这里只是想拿它来的实现亲笔签名，开启不一样的亲笔签名姿势。
开发框架：uniapp
开发语言：vue2
展示平台：微信小程序（实际可以兼容多个平台）
标签和样式没什么好说的，这里绘制了简单的页面，见下图：
2、横屏切换
到【pages.json】文件中添加横屏切换配置
注意：不同的平台横屏切换将有所不一样。这里是针对微信小程序的横屏适配
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "亲笔签名",//导航栏标题
"pageOrientation": "landscape",//切换横屏
"enablePullDownRefresh": false,//关闭下拉刷新
"disableScroll": true // 整体页面禁止上下滑动
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#FFFFFF",
"backgroundColor": "#f5f5f5",
"navigationStyle": "default", // default/custom。custom即取消默认的原生导航栏
"mp-alipay": {
"transparentTitle": "always",
"titlePenetrate": "YES"
}
}
}
然后是绘制逻辑处理，注意点在代码中备注：
3、绘图 3.1、初始化数据会吧？ data() {
return {
canvasCtx: '', //绘图图像
points: [], //路径点集合
hasSign: false,
isInit: false,
}
},
onLoad(query) {
this.canvasCtx = uni.createCanvasContext('canvas_sign', this) //创建绘图对象
//设置画笔样式
this.canvasCtx.lineWidth = 6
// 设置线条的端点样式
this.canvasCtx.lineCap = 'round'
// 设置线条的交点样式
this.canvasCtx.lineJoin = 'round'
},
3.2、触摸开始时获取起点，会吧？
touchstart: function(e) {
if (!this.isInit) {
this.isInit = true
this.autographClick(1);
}
let startX = e.changedTouches[0].x
let startY = e.changedTouches[0].y
let startPoint = {
X: startX,
Y: startY
}
this.points.push(startPoint)
//每次触摸开始，开启新的路径
this.canvasCtx.beginPath()
},
3.3、触摸移动获取路径点，会吧？
touchmove: function(e) {
let moveX = e.changedTouches[0].x
let moveY = e.changedTouches[0].y
let movePoint = {
X: moveX,
Y: moveY
}
this.points.push(movePoint) //存点
let len = this.points.length
if (len >= 2) {
this.draw() //绘制路径
}
},
3.4、触摸结束，将未绘制的点清空防止对后续路径产生干扰，简单吧？
touchend: function() {
this.points = []
this.canvasCtx.draw(true)
},
3.5、绘制笔迹，没得问题吧？
这里有几个注意点：
1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
draw: function() {
let point1 = this.points[0]
let point2 = this.points[1]
this.points.shift()
this.canvasCtx.moveTo(point1.X, point1.Y)
this.canvasCtx.lineTo(point2.X, point2.Y)
this.canvasCtx.stroke()
this.canvasCtx.draw(true)
this.hasSign = true
},
4、扫尾处理
上面的实现了，说明就可以签下你大名了。这里扫尾工作（按钮点击功能实现）只是景上添花。根据实际情况不一定要做。
demo地址：
1、CSDN资源库地址：https://download.csdn.net/download/weixin_38633659/85343244
2、gitee地址：https://gitee.com/chenzm_186/autograph-mini.git
**结束语 **
：以上功能已全部实现，那么你想已怎么样的姿势开启你的亲笔签名模式呢？欢迎留言评论！
：最后如果觉得我写的文章对您有帮助的话，欢迎点赞✌，收藏✌，加关注✌哦，谢谢谢谢！！
