好的，可以先在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>
```
3488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
