canvas 添加线和删除线 及获取相关位置信息源码

https://github.com/lusase/lineDrawer.git

markCanvasHandler(color) { 
        var canvas = document.getElementById("canvas_zhumianban");    
        var cxt = canvas.getContext("2d");    
        cxt.strokeStyle = "" + color + "";    
        cxt.beginPath();    

        canvas.onclick = function(e) {

           
          _this.form.position.push(_this.formateMark(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop))  
          cxt.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); 
          document.onmousemove = function(e) {                            
            document.onmouseup = function(e) {
              cxt.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);            
              cxt.stroke();                
              document.onmousedown = '';               
              document.onmousemove = '';            
            };        
          };   
        };
      }

　　

formateMark(x, y) {
        let obj = {}
        let left = parseInt(x / this.winWidth * 100) + '%'
        let top = parseInt(y / this.winHeight * 100) + '%'

        return obj = {
          left: left,
          top: top
        }
      },

　　

// 添加标记
      addMark(e) {
        let left = parseInt(e.clientX / this.winWidth * 100) + '%'
        let top = parseInt(e.clientY / this.winHeight * 100) + '%'

        let obj = {
          left: left,
          top: top
        }
        this.arr.push(obj)
      },