Vue3实现在线签名

最新推荐文章于 2024-11-01 18:00:49 发布

创客皮卡丘

最新推荐文章于 2024-11-01 18:00:49 发布

阅读量1.1k

点赞数 10

分类专栏：我的前端学习路线文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/m0_49882786/article/details/139520206

版权

在线签名

在这里插入图片描述

代码实现

<template>
    <h3>在线签名</h3>
    <div ref="mainboard" class="container">
        <div class="mianboard" :style="{
            width: data.size.width + 'px',
            height: data.size.height + 'px'
        }">
            <!-- 主画板 -->
            <canvas id="main" :width="data.size.width" :height="data.size.height"></canvas>
            <!-- 签名绘制浮层画板 -->
            <div ref="floatboard" v-show="show" class="floatboard" :style="{
                left: left + 'px',
                top: top + 'px'
            }" @mousedown="floatMouseDown">
                <canvas id="float" width="200" height="80"></canvas>
            </div>
            <div class="sab">
                <button @click="save">保存</button>
                <button @click="backInit">清除</button>

最低0.47元/天解锁文章