SOURCE

//  var redInput=document.getElementById("red")
//  var greenInput=document.getElementById("green")
//  redInput.oninput=(e)=>{
     
//  }
//  greenInput.oninput=(e)=>{

//  }
 var points = {
    rect1: [
      { x: 20, y: 20, isSelected: false },
      { x: 120, y: 20, isSelected: false },
      { x: 120, y: 120, isSelected: false },
      { x: 20, y: 120, isSelected: false },
    ],
    rect2: [
      { x: 140, y: 20, isSelected: false },
      { x: 240, y: 20, isSelected: false },
      { x: 240, y: 120, isSelected: false },
      { x: 140, y: 120, isSelected: false },
    ]
  }
  var moved = false
  var mouseInit = {}
  // 画图
  function drawRect(Array) {
    // 设置线的样式
    // context.setLineDash([4, 2])
    // 设置连线点样式
    context.lineJoin = 'round'
    context.beginPath()
    // 遍历坐标点
    for (let i = 0; i < Array.length; i++) {
      const ele = Array[i];
      if (i < 1) {
        context.moveTo(ele.x, ele.y);
      } else {
        context.lineTo(ele.x, ele.y);

      }

    }
    context.lineWidth = 3;
    // 判断显示不同颜色的四边形
    if (Array == points.rect1) {
      context.strokeStyle = 'red'
    } else {
      context.strokeStyle = 'green'
    }

    // 随机颜色
    // context.strokeStyle = '#'+(Math.random()*0xffffff<<0).toString(16); 
    context.closePath();
    context.stroke();
    drawArc(Array)
  }
  //画四角圆
  function drawArc(Array) {

    // 遍历坐标点
    for (let i = 0; i < Array.length; i++) {
      const ele = Array[i];
      context.beginPath()
      context.lineWidth = 3;
      context.fillStyle = '#FFF'
      context.arc(ele.x, ele.y, 5, 0, Math.PI * 2, false);
      // 判断显示不同颜色的四边形
      if (Array == points.rect1) {
        context.strokeStyle = 'red'
      } else {
        context.strokeStyle = 'green'
      }
      // 随机颜色
      // context.strokeStyle = '#'+(Math.random()*0xffffff<<0).toString(16); 
      context.closePath();
      context.fill();
      context.stroke();
    }


  }
  // 画点连线
  function drawRects() {
    // 清除画布，准备绘制
    context.clearRect(0, 0, canvas.width, canvas.height);
    drawRect(points.rect1)
    drawRect(points.rect2)
  }

  // 遍历元素在哪一个圆上
  var selectObject
  function circle(Array, clientX, clientY) {

    for (let i = 0; i < Array.length; i++) {
      const ele = Array[i];
      // Math.abs返回绝对值
      // Math.sqrt返回一个数的平方根
      // Math.pow幂函数运算
      var line = Math.abs(Math.sqrt(Math.pow((ele.x - clientX), 2) + Math.pow((ele.y - clientY), 2)))
      // 判断点击的位置在哪一个圆里面
      if (line - 5 < 0) {
        ele.isSelected = true
        isDragging = true
        selectObject = Array[i]

      } else {
        ele.isSelected = false
      }
    }
  }
  //是否在圆上
  function inCircle(Array, clientX, clientY) {
    let t = false
    for (let i = 0; i < Array.length; i++) {
      const ele = Array[i];
      // Math.abs返回绝对值
      // Math.sqrt返回一个数的平方根
      // Math.pow幂函数运算
      var line = Math.abs(Math.sqrt(Math.pow((ele.x - clientX), 2) + Math.pow((ele.y - clientY), 2)))
      // 判断点击的位置在哪一个圆里面

      if (line - 5 < 0) {
        t = true
      }
    }
    return t
  }
  // Canvas点击事件
  // 遍历所有的坐标点
  function clickPoint(e) {
    // 屏幕事件
    var ev = window.event || e;
    // 判断屏幕，减去屏幕中的偏移量
    //offsetLeft会受父级的position属性影响,同理offsetTop也会
    var clientX = e.clientX - this.offsetLeft;
    var clientY = e.clientY - this.offsetTop;
    isDragging = true
    circle(points.rect1, clientX, clientY)
    circle(points.rect2, clientX, clientY)
    let point = {
      x: e.offsetX,
      y: e.offsetY
    }
// 判断是否可拖动
    if (isIn(point, points, e).isRect) {
      moved = true
      mouseInit = point
    } else {
      moved = false
    }


  }

  var isDragging = false
  function dragCircle(e) {
    // 判断是否可以拖动
    let point = {
      x: e.offsetX,
      y: e.offsetY
    }
    //改变鼠标形状
    if (isIn(point, points, e).isRect) {
      canvas.style.cursor = 'move'

    } else {
      if (isIn(point, points, e).isC) {

        canvas.style.cursor = 'pointer'
      } else {
        canvas.style.cursor = 'default'
      }

    }
    if (isDragging && !moved) {
      // 取得画布上被点击的点
      //offsetLeft会受父级的position属性影响,同理offsetTop也会
      var clickX = e.pageX - canvas.offsetLeft;
      var clickY = e.pageY - canvas.offsetTop;
      selectObject.x = clickX
      selectObject.y = clickY
      drawRects()
    }
    //移动图形
    if (moved) {
      throttle(_drawRects)(e, point)

    }

  }
  function isIn(pt, objs, e) {
    let arrKeys = Object.keys(objs)
    let t = false//是否在多边形内
    let tc = false//是否在圆圈内
    let keys = ''//所在多边形key
    for (let i = 0; i < arrKeys.length; i++) {
      if (pointInPoly(pt, objs[arrKeys[i]])) {
        t = true
        keys = arrKeys[i]
      }
      if (!tc) {
        tc = inCircle(objs[arrKeys[i]], e.offsetX, e.offsetY)
      }

    }
    return {
      isRect: t,
      isC: tc,
      keys: keys
    }
  }
  //计算一个点是否在多边形里,参数:点,多边形数组
  function pointInPoly(pt, poly) {
    for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) {
      ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    }
    return c;



  }
  // 停止拖动事件
  function stopDragging() {
    isDragging = false
    moved = false
    mouseInit = {}
    // 鼠标结束时的坐标
    selectObject = {}
  }
  // 移动重绘
  function _drawRects(e, point) {
    let movex = e.offsetX - mouseInit.x
    let movey = e.offsetY - mouseInit.y

    let arrKeys = Object.keys(points)
    mouseInit.x = e.offsetX
    mouseInit.y = e.offsetY
    for (let i = 0; i < arrKeys.length; i++) {
      if (isIn(point, points, e).keys === arrKeys[i]) {
        points[arrKeys[i]].map((item, index) => {
          item.x = item.x + movex
          item.y = item.y + movey
        })
      }
    }
    drawRects()
  }
  function stopDragging() {
    isDragging = false
    moved = false
    // 鼠标结束时的坐标
    selectObject = {}
  }
  //防抖
  function throttle(fn, time = 10) {
    let timer = null
    return (...args) => {
      if (!timer) {
        timer = setTimeout(() => {
          fn.apply(null, args)
          timer = null
        }, time)
      }
    }
  }
  var canvas = document.getElementById('canvas')
  var context = canvas.getContext('2d')
  drawRects()
  canvas.onmousedown = clickPoint;
  canvas.onmouseup = stopDragging;
  canvas.onmousemove = dragCircle
  // canvas.onmouseout = stopDragging;

<!-- <div class="head">
    <label for="red">红色框</label>
    <input  id="red" max=5 min=0 step=1 type="number"/>
    <label for="green">绿色框</label>
    <input  id="green" max=5 min=0 step=1  type="number"/>
</div> -->
<canvas id="canvas" width="800"  height="600"></canvas>

.head{
    height: 50px;
    line-height: 50px;
}
canvas{
    background-color: #333
}