VUE中使用canvas做签名功能，兼容IE

<template>

        <div>

          <div class="msgInput">

            <div class="msgInputLeft">

                <span class="qianming">签名:</span>

                <div class="sign-canvas">

                    <canvas

                            id="canvas"

                            width="600"

                            height="600"

                            @mousedown="canvasDown($event)"

                            @mousemove="canvasMove($event)"

                            @mouseup="canvasUp()"

                            @mouseleave="canvasLeave()"

                            ref="canvas"

                    >

                        抱歉，您的浏览器暂不支持canvas元素

                    </canvas>

                </div>

              

                        <div class="bottom_btn">

                            <el-button type="primary" @click="clear" class='clickReset' round>清除签名</el-button>

                            <el-button type="primary" @click="request"  class='clickFinish'  round>确认</el-button>

                            <!-- <el-button type="primary" @click="request" round>发送请求</el-button> -->

                        </div>

                    

            </div>

          </div>

        </div>

      </template>

      

      <script>

        export default {

          components: {},

          props: {},

          data() {

            return {

              imgBase64:''

              

            }

          },

          watch: {},

          computed: {},

          methods: {

            show(){

                    this.canvas = this.$refs.canvas;// 指定canvas

                    this.ctx = this.canvas.getContext("2d") // 设置2D渲染区域

                    this.ctx.lineWidth = 5; // 设置线的宽度

                },

                canvasDown(e) {

                    console.log(e);

                    this.canvasMoveUse = true;

                    const canvasX = e.clientX - e.target.offsetLeft + document.documentElement.scrollLeft

                    const canvasY = e.clientY -130 - 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 -130 - 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)

                },

                request() {

                    this.imgBase64 = this.$refs.canvas.toDataURL('image/png');

                    console.log(this.imgBase64);

 

               

          },

          created() {},

          mounted() {

            this.show();

          }

        }

      

      </script>

      <style>

        .qianming{

          margin-left: 30px;

          font-size: 20px;

        }

        .qianming_title{

            margin-left: 30px;

            padding-top:20px;

            font-size: 20px;

        }

        .bottom_btn{

          margin-top:40px;

        }

        .msgInput {

          height: 800;

          width: 800px;

          

        }

        .msgInputLeft {

          height: 800px;

          width: 800px;

          background: white;

          border-radius: 15px;

          padding-top:20px;

        }

        .sign-canvas{

            display: flex;

            flex-direction: column;

            align-items: center;

            width: 600px;

            height: 600px;

            padding: 20px 30px;

        }

        .sign-canvas canvas{

            background-color: #fefeff;

            border: 2px solid #409EFF;

            border-radius:10px;

            margin-left: 25%;

        }

        .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: rgb(255, 253, 253);

            color: #333333;

        }

        .sign-btn .clear {

            background-color: #FF8F58;

        }

        .sign-btn .save {

            background-color: #0599D7;

        }

        .clickReset{

            margin-top:20px;

            margin-left: 30px;

            background-color: white;

            color:#409EFF;

            border: 2px solid #409EFF;

        }

        .clickFinish{

            float: right;

            margin-top:20px;

            margin-right: 30px;

        }

      </style>