canvas 手写签名 vue3

<canvas ref='canvas' height="360" width="600"></canvas>
<div class="signature">
   <button class="re-sign" ref="clearBtn">重新签名</button>
</div>    

 

<script setup>
import { onMounted, ref } from 'vue'

const canvas = ref(null);
let ctx = ref();

const initContext = () => {
    ctx = canvas.value.getContext('2d');
}  
let isDrawing = false;
let lastX = 0;
let lastY = 0;
// 重新写
let clearBtn = ref(null);
onMounted(() => { 
    initContext();
    canvas.value.addEventListener('mousedown', function (e) {
        isDrawing = true;
        [lastX, lastY] = [e.offsetX, e.offsetY];
    });
    canvas.value.addEventListener('mousemove', function (e) {
        if (isDrawing) {
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
            [lastX, lastY] = [e.offsetX, e.offsetY];
        }
    });
    canvas.value.addEventListener('mouseup', function () {
        isDrawing = false;
    });

    clearBtn.value.addEventListener('click', function () {
        ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
    });
 

</script>