vue使用canvas画布实现电子版签名

Vue结合Canvas实现电子版签名

最新推荐文章于 2025-03-06 14:50:37 发布

原创

最新推荐文章于 2025-03-06 14:50:37 发布 · 756 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #typescript

canvas组件介绍

使用canvas实现电子版签名

canvas组件介绍

canvas组件是一个可以自定义width、height 的矩形画布，画布左上角为原点（0，0），水平向右为X轴，垂直向下为Y轴。

可以去看看这篇博客：https://blog.csdn.net/openharmony/article/details/124118356

使用canvas实现电子版签名

代码实现：

<template>
  <div style="width: 500px; height: 400px; border: 1px solid black">
    <!-- 创建画布 -->
    <canvas
      ref="canvas"
      class="jSignature"
      tabindex="0"
      @mousedown="onMouseDown"
      :style="{ border: '1px solid #000' }"
    />
    <footer class="dialog-footer">
      <el-button type="danger" @click="clearPanel">清空签名</el-button>
      <el-button type="primary" @click="confirm">确认签名</el-button&g