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

其他相关链接：

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

https://www.jb51.net/css/359062.html

https://www.jb51.net/css/359062.html

markCanvasHandler(color, data) { 
        let canvas = document.getElementById("canvas_zhumianban");    
        if(canvas) {
          let cxt = canvas.getContext("2d");;   
          //  设置宽高
          canvas.width = this.winWidth
          canvas.height = this.winHeight
          cxt.strokeStyle = "" + color + "";      
          cxt.lineWidth = 2;  
          cxt.beginPath();
          console.log(cxt)
          data.forEach((item) => {
            item.dots.forEach((dot, idx) => {
              let left = parseInt(dot[0] * 100);
              let top = parseInt(dot[1] * 100);
              if(idx === 0) {
                console.log('if', idx, left, top)
                cxt.moveTo(left, top);
              } else {
                console.log('else', idx, left, top)
                cxt.lineTo(left, top);
                cxt.fill();
                cxt.stroke();

              }

            })
          })
        }

　　

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)
      },

 let canvas = document.getElementById("canvas_zhumianban");
        let cxt = canvas.getContext("2d");
        cxt.beginPath();

        canvas.onmousedown = function(ev) {
          var ev = ev || window.event;
          cxt.moveTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
          document.onmousemove = function(ev) {
            var ev = ev || window.event;
            cxt.lineTo(ev.clientX - canvas.offsetLeft, ev.clientY - canvas.offsetTop);
            cxt.stroke();
          };
          document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
          };

        }