不多说,上代码:

<template>
        <div class="sign-canvas">
            <canvas
                    id="canvas"
                    width="400"
                    height="600"
                    @mousedown="canvasDown($event)"
                    @mousemove="canvasMove($event)"
                    @mouseup="canvasUp()"
                    @mouseleave="canvasLeave()"
                    ref="canvas"
            >
                抱歉,您的浏览器暂不支持canvas元素
            </canvas>
            <div class="sign-btn">
                <div class="clear" @click="clear">
                    清空
                </div>
                <div class="save" @click="save">
                    保存
                </div>
            </div>
        </div>
    </template>
<script>
        export default {
            mounted() {
                this.show();
            },
            methods:{
                show(){
                    this.canvas = this.$refs.canvas;// 指定canvas
                    this.ctx = this.canvas.getContext("2d") // 设置2D渲染区域
                    this.ctx.lineWidth = 5; // 设置线的宽度
                },
                canvasDown(e) {
                    this.canvasMoveUse = true;
                    const canvasX = e.clientX - e.target.offsetLeft + document.documentElement.scrollLeft
                    const canvasY = e.clientY - e.target.offsetTop + document.documentElement.scrollTop
                    this.ctx.beginPath()  // 移动的起点
                    this.ctx.moveTo(canvasX, canvasY)
                },
                canvasMove(e) {
                    // 只在移动是进行绘制图线
                    if (this.canvasMoveUse) {
                        const t = e.target;
                        let canvasX;
                        let canvasY;
                        canvasX = e.clientX - t.offsetLeft + document.documentElement.scrollLeft
                        canvasY = e.clientY - t.offsetTop + document.documentElement.scrollTop
                        this.ctx.lineTo(canvasX, canvasY)
                        this.ctx.stroke()
                    }
                },
                canvasUp() {
                    this.canvasMoveUse = false;
                },
                canvasLeave() {
                    this.canvasMoveUse = false;
                },
                clear(){
                    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
                },
                save() {
                    const imgBase64 = this.$refs.canvas.toDataURL();
                    console.log(imgBase64);
                }
            }
        }
    </script>
    
    <style scoped>
        .sign-canvas{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 100%;
            padding: 20px 30px;
        }
        .sign-canvas canvas{
            background-color: #e0e3e5;
        }
        .sign-btn {
            display: flex;
            margin:20px 0;
        }
        .sign-btn div {
            width: 175px;
            text-align: center;
            height: 70px;
            line-height: 70px;
            color: #FFFFFF;
        }
        .sign-btn div:active {
            background-color: #CCCCCC;
            color: #333333;
        }
        .sign-btn .clear {
            background-color: #FF8F58;
        }
        .sign-btn .save {
            background-color: #0599D7;
        }
    </style>
    样式图:

效果图:

vue中使用canvas绘制签名的更多相关文章

  1. VUE中使用canvas做签名功能,兼容IE

    <template>         <div>           <div class="msgInput">             &l ...

  2. [Selenium] 操作 HTML5 中的 Canvas 绘制图形

    测试 http://literallycanvas.com/ 以 Chrome Driver 为例阐述,通过 Actions 在 Canvas 上绘制一个封闭图形.对于 Canvas 上的操作,推荐 ...

  3. vue项目中使用canvas

    canvas API 文档:https://www.canvasapi.cn/ 一.在html中使用canvas canvas 元素用于在网页上绘制图形.  在html中,使用 document.ge ...

  4. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  5. Android自己定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了非常多插件,可是非常多时候我们须要依据详细项目自己定义这些图表,这一篇文章我们一起来看看怎样在Android中使用Can ...

  6. Android自定义控件 -Canvas绘制折线图(实现动态报表效果)

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  7. Android自定义组件系列【9】——Canvas绘制折线图

    有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canvas ...

  8. vue中使用raphael.js实现地图绘制

    一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> &l ...

  9. 如何使用canvas绘制椭圆,扩展非chrome浏览器中的ellipse方法

    这篇博文主要针对浏览器中绘制椭圆的方法扩展.在网上搜索了很多,发现他们绘制椭圆的方式都有缺陷.其中有压缩法,计算法,贝塞尔曲线法等多种方式.但是都不能很好的绘制出椭圆.所有我就对这个绘制椭圆的方式进行 ...

随机推荐

  1. Number theory

    题目链接 思路:针对一个数组的操作,即对一个区间.可以用线段树去进行维护.初始化建树,叶子节点的值为1,维护每段区间上各个元素的乘积sum.M yi,将第i个元素的值改为yi.N di,将第di个元素 ...

  2. RabbitMQ生产者消费者模型构建(三)

    ConnectionFactory:获取连接(地址,端口号,用户名,密码,虚拟主机等) Connection:一个连接 Channel:数据通信信道,可发送.接收消息 Queue:具体的消息存储队列 ...

  3. 解决Docker容器 iptables问题---docker: Error response from daemon: driver failed programming external connectivity on endpoint quizzical_thompson

    一.问题现象 最近在研究Docker容器日志管理时,启动容器出现iptables相关报错,具体问题如下 运行容器 [root@node-11 ~]# docker run -d -p 24224:24 ...

  4. 牛客提高D4t2 卖羊驼

    分析 不难想到dp[i][j]表示前i个数分了j组的最大值 我们发现这个dp状态有决策单调性 g[i][j]表示对于第i个数它的第j位最近出现的位置 每次一定从这些点转移 预处理即可 似乎还可以做到1 ...

  5. DB-MD:MD/主数据

    ylbtech-DB-MD:MD/主数据 主数据(MD Master Data)指系统间共享数据(例如,客户.供应商.账户和组织部门相关数据).与记录业务活动,波动较大的交易数据相比,主数据(也称基准 ...

  6. 京东商品评论的分类预测与LSA、LDA建模

    (一)数据准备 1.爬取京东自营店kindle阅读器的评价数据,对数据进行预处理,使用机器学习算法对评价文本进行舆情分析,预测某用户对本商品的评价是好评还是差评.通过数据分析与模型分析,推测出不同型号 ...

  7. 《JAVA设计模式》之工厂方法模式 (Factory)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述工厂方法模式的: 工厂方法模式是类的创建模式,又叫做虚拟构造子(Virtual Constructor)模式或者多态性工厂(Polymor ...

  8. [Codeforces712D] Memory and Scores(DP+前缀和优化)(不用单调队列)

    [Codeforces712D] Memory and Scores(DP+前缀和优化)(不用单调队列) 题面 两个人玩游戏,共进行t轮,每人每轮从[-k,k]中选出一个数字,将其加到自己的总分中.已 ...

  9. web调试代理工具Whistle

    由于最近在学习微信小程序开发,项目中用到了https代理请求,所以用到了基于Node实现的跨平台web调试代理工具Whistle,在此做一记录. 完成https代理请求总共需要5个步骤. 一.安装No ...

  10. seaborn教程3——数据集的分布可视化

    原文转载:https://segmentfault.com/a/1190000015006667 Seaborn学习大纲 seaborn的学习内容主要包含以下几个部分: 风格管理 绘图风格设置 颜色风 ...