微信小程序 canvas 手写签名(2d)
2021/9/12 9:34:56
本文主要是介绍微信小程序 canvas 手写签名(2d),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
canvas 2d 目前支持预览,不支持真机调试
index.wxml
<canvas type="2d" id="canvas" bindtouchmove="move" bindtouchstart="start" binderror="error" style="width:{{width}}px;height:{{height}}px;"></canvas> <view class="btn"> <button bindtap="clearClick">重签</button> <button bindtap="saveClick">完成签名</button> </view>
index.wxss
page { background-color: #e9f2f1; } .btn { display: flex; flex-direction: row; justify-self: baseline; margin: 15rpx; } .btn button:first-child { color: #3fa89a; } .btn button:last-child { color: white; background-color: #3fa89a; } button { width: 200rpx; border-radius: 5rpx; box-shadow: 0px 0px 1px 1px #c5c5c5; } canvas { background-color: white; }
index.json
{ "usingComponents": {}, "pageOrientation": "landscape", "navigationBarBackgroundColor":"#3fa89a", "navigationBarTextStyle":"white", "navigationBarTitleText":"手写签名" }
index.js
const app = getApp() Page({ data: { canvas: '', ctx: '', pr:0, width: 0, height: 0, first:true, }, start(e) { if(this.data.first){ this.clearClick(); this.setData({first:false}) } this.data.ctx.beginPath(); // 开始创建一个路径,如果不调用该方法,最后无法清除画布 this.data.ctx.moveTo(e.changedTouches[0].x, e.changedTouches[0].y) // 把路径移动到画布中的指定点,不创建线条。用 stroke 方法来画线条 }, move(e) { this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y) // 增加一个新点,然后创建一条从上次指定点到目标点的线。用 stroke 方法来画线条 this.data.ctx.stroke() }, error: function (e) { console.log("画布触摸错误" + e); }, /** * 生命周期函数--监听页面加载 */ onl oad: function () { this.getSystemInfo() this.createCanvas() }, /** * 初始化 */ createCanvas() { const pr = this.data.pr; // 像素比 const query = wx.createSelectorQuery(); query.select('#canvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node; const ctx = canvas.getContext('2d'); canvas.width = this.data.width*pr; // 画布宽度 canvas.height = this.data.height*pr; // 画布高度 ctx.scale(pr,pr); // 缩放比 ctx.lineGap = 'round'; ctx.lineJoin = 'round'; ctx.lineWidth = 4; // 字体粗细 ctx.font = '40px Arial'; // 字体大小, ctx.fillStyle = '#ecf0ef'; // 填充颜色 ctx.fillText('签名区', res[0].width / 2 - 60, res[0].height / 2) this.setData({ ctx, canvas }) }) }, // 获取系统信息 getSystemInfo() { let that = this; wx.getSystemInfo({ success(res) { that.setData({ pr:res.pixelRatio, width: res.windowWidth, height: res.windowHeight - 75, }) } }) }, clearClick: function () { //清除画布 this.data.ctx.clearRect(0, 0, this.data.width, this.data.height); }, //保存图片 saveClick: function () { wx.canvasToTempFilePath({ x: 0, y: 0, width: this.data.width, height: this.data.height, destWidth:this.data.width*this.data.pr, destHeight: this.data.height*this.data.pr, canvasId: 'canvas', canvas: this.data.canvas, fileType: 'png', success(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { wx.showToast({ title: '保存成功', icon: 'success' }) } }) } }) } })
效果图
签名效果
PNG图
这篇关于微信小程序 canvas 手写签名(2d)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享