不多说,上代码:

<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. 字符串(二):string

    字符串使用方法整理 系列: 字符串(一):char 数组 字符串(二):string string 是 C++ STL 的一个字符串类型,原型是 vector<char> 并对字符串处理做 ...

  2. php heredoc的用法详解

    Heredoc技术,在正规的PHP文档中和技术书籍中一般没有详细讲述,只是提到了这是一种Perl风格的字符串输出技术.但是现在的一些论坛程序,和部分文章系统,都巧妙的使用heredoc技术,来部分的实 ...

  3. 2019/10/13 TZOJ

    水题虽不好,但是很爽 渴望未来某天能把剩下的题补了,先做个记录. Hard Disk Drive http://acm.hdu.edu.cn/showproblem.php?pid=4788 单位转化 ...

  4. 找不到/lib/modules/../build文件夹

    :解决了make: *** /lib/modules/3.2.0-4-amd64/build: 没有那个文件或目录的问题,更新一下软件列表,然后sudo apt-get install linux-h ...

  5. Mac009--Axure RP安装

    Mac--Axure RP安装 一.下载Axure RP8.0 下载网址:https://www.axure.com/download  (下载mac版本) Axure RP说明: Axure RP是 ...

  6. mooc-IDEA 编写高质量代码--009

    十五.IntelliJ IDEA -编写高质量代码 1.重构 [1]重构变量 选中某个变量,按住 shift+F6,修改变量名,则所有该变量名均会被重构为新变量名 [2]重构方法[ctrl+F6 | ...

  7. 19.ThreadLocal方法解决代码不友好的问题

    #ThreadLocal import threading #创建全局ThreadLocal loacl_school = threading.local() class Student(): def ...

  8. "CoolShell puzzle game" writeup

    地址:http://fun.coolshell.cn/ Fuck your brain 看到一大串符号,还以为是 js 代码,结果放到 Chrome 控制台执行没有任何结果,然后搜了一下发现有一门叫B ...

  9. Spring学习(五)--构建Spring Web应用程序

    一.Spring MVC起步 看过猫和老鼠的小伙伴都可以想象Tom猫所制作的捕鼠器:它的目标 是发送一个小钢球,让它经过一系列稀奇古怪的装置,最后触发捕鼠 器.小钢球穿过各种复杂的配件,从一个斜坡上滚 ...

  10. node进程一些信号的意义

    1.SIGINT这个信号是系统默认信号,代表信号中断,就是ctrl+c: 2.SIGQUIT 3.SIGTERM 4.exit