手机手写签名 php,基于canvas实现手写签名(vue)

最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣。就自己基于vue写了一个简易的手写签名demo。

其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstart和touchmove事件进行监听。当监听touchstart事件被触发时,我们开始触发canvas里的beginPath事件并且设置moveTo原始点。当监听touchmove事件则去不断去触发lineTo事件,最后stroke()。

demo里还有清除签名和保存签名的功能,分别对应了clearRect()和toDataURL()方法。

具体的demo代码如下:

清除

保存

export default {

name: "sign-name",

data(){

return {

ctx:null,

canvas:null

}

},

mounted() {

this.initPage()

},

methods:{

initPage() {

this.canvas = document.getElementById('canvas')

if(this.canvas.getContext){

this.ctx = this.canvas.getContext('2d')

let background = "#ffffff"

this.ctx.lineCap = 'round'

this.ctx.fillStyle = background

this.ctx.lineWidth = 2

this.ctx.fillRect(0,0,350,150)

this.canvas.addEventListener("touchstart",(e)=>{

console.log(123,e)

this.ctx.beginPath()

this.ctx.moveTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY)

})

this.canvas.addEventListener("touchmove",(e)=>{

this.ctx.lineTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY)

this.ctx.stroke()

})

}

},

toClear() {

this.ctx.clearRect(0,0,300,150)

},

toSave() {

let base64Img = this.canvas.toDataURL()

console.log(123,base64Img)

}

}

}

.btn {

height: px2Vw(55);

position: fixed;

bottom: 0;

line-height: px2Vw(55);

border-top: px2Vw(1) solid #f7f8f9;

span {

display: inline-block;

width: px2Vw(185);

text-align: center;

}

}

canvas {

position: fixed;

border: 2px dashed #cccccc;

float: right;

}

代码运行后的效果图如下:

681bac9f9f8ffdd808285576e96992ca.png

fb0e095c0f679834c14cc40a15e8faf9.png

这只是个简易的demo,肯定会有很多未考虑到的地方。demo的下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,可以先在template中添加一个canvas标签,然后钩子函数中获取该标签并设置画布大小和绘制笔刷等属性。接着可以监听鼠标或触摸事件,在相应的事件处理函数中获取鼠标或触摸点坐标,并在画布上绘制路径。最后可以添加清空按钮,通过清空画布达到重新签名的效果。具体代码实现可以参考以下示例: ```html <template> <div> <canvas ref="canvas" @mousedown="startDrawing" @touchstart="startDrawing" @mousemove="drawing" @touchmove="drawing" @mouseup="stopDrawing" @touchend="stopDrawing" :width="width" :height="height" style="border: 1px solid #ccc;"></canvas> <button @click="clear">清空</button> </div> </template> <script> export default { data() { return { ctx: null, isDrawing: false, lineWidth: 2, strokeStyle: '#333', width: 300, height: 150 } }, mounted() { const canvas = this.$refs.canvas this.ctx = canvas.getContext('2d') this.ctx.lineJoin = 'round' this.ctx.lineCap = 'round' this.ctx.lineWidth = this.lineWidth this.ctx.strokeStyle = this.strokeStyle }, methods: { startDrawing(event) { event.preventDefault() this.isDrawing = true this.ctx.beginPath() const pos = this.getMousePosition(event) this.ctx.moveTo(pos.x, pos.y) }, drawing(event) { event.preventDefault() if (this.isDrawing) { const pos = this.getMousePosition(event) this.ctx.lineTo(pos.x, pos.y) this.ctx.stroke() } }, stopDrawing(event) { event.preventDefault() this.isDrawing = false }, clear() { this.ctx.clearRect(0, 0, this.width, this.height) }, getMousePosition(event) { const canvas = event.target const rect = canvas.getBoundingClientRect() const scaleX = canvas.width / rect.width const scaleY = canvas.height / rect.height return { x: (event.clientX - rect.left) * scaleX, y: (event.clientY - rect.top) * scaleY } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值