使用javascript鼠标移动时更改圆圈的旋转速度

Question

基本上，我有两个圆以一定的速度旋转。我想改变旋转的速度。当用户的鼠标从屏幕中心变得更快时，它将更快地旋转。当用户的鼠标靠近屏幕中心时，它将旋转得更慢。现在我所做的就是让它们旋转，但它们似乎以相同的速度旋转。

HTML：

<canvas></canvas>

的CSS：

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  background: #FFFFFF;
}

JS：

$(document).ready(function(){
    var mX, mY, distance, dotSpeed;

    var numDots = 500,
        n = numDots,
        leftCurrDot,
        rightCurrDot,
        dotRad = 2,
        maxRad = 150,
        minRad = 30,
        radDiff = maxRad-minRad,
        leftDots = [],
        rightDots = [],
        PI = Math.PI,
        leftCenterPt = {x:0, y:0},
        rightCenterPt = {x:0, y:0};

    // Create a canvas
    var cvs = document.createElement('canvas'),
        context = cvs.getContext("2d");

    $(document).mousemove(function(e){  
        mX = e.pageX;
        mY = e.pageY;
        distance = calculateDistance(mX, mY);
        rightCurrDot.speed = maping(distance, 0, 700, 0.005, 0.1);
        leftCurrDot.speed = maping(distance, 0, 700, 0.005, 0.1);
    });

    function calculateDistance(mouseX, mouseY) {
        return Math.floor(Math.sqrt(Math.pow(mouseX - window.innerWidth / 2, 2) + Math.pow(mouseY - window.innerHeight / 2, 2)));
    }

    // Function to map a range
    function maping (num, fromMin, fromMax, toMin, toMax) {
        return (num - fromMin) / (fromMax - fromMin) * (toMax - toMin) + toMin;
    }

    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;

    document.body.appendChild(cvs);

    resizeHandler();
    window.onresize = resizeHandler;

    while (n--) {
      leftCurrDot = {};
      leftCurrDot.radius = minRad+Math.random()*radDiff;
      leftCurrDot.ang = (1-Math.random()*2)*PI;
      leftCurrDot.speed = (1-Math.random()*2) * 0.5;
      leftCurrDot.fillColor = "rgb(226, 30, 58)";
      leftDots.push(leftCurrDot);

      rightCurrDot = {};
      rightCurrDot.radius = minRad+Math.random()*radDiff;
      rightCurrDot.ang = (1-Math.random()*2)*PI;
      rightCurrDot.speed = (1-Math.random()*2);
      rightCurrDot.fillColor = "rgb(30, 30, 226)";
      rightDots.push(rightCurrDot);
    }

    function drawPoints (e) {
        n = numDots;
        var _leftCenterPt = leftCenterPt,
            _rightCenterPt = rightCenterPt,
            _context = context,
            dLeftX = 0,
            dLeftY = 0,
            dRightX = 0,
            dRightY = 0;

        _context.clearRect(0, 0, cvs.width, cvs.height);

        // draw dots on the screen
        while (n--) {
            leftCurrDot = leftDots[n];
            dLeftX = _leftCenterPt.x+Math.sin(leftCurrDot.ang)*leftCurrDot.radius;
            dLeftY = _leftCenterPt.y+Math.cos(leftCurrDot.ang)*leftCurrDot.radius;

            leftCurrDot.ang += leftCurrDot.speed;

            _context.fillStyle = leftCurrDot.fillColor;
            _context.fillRect(dLeftX, dLeftY, dotRad, dotRad);

            rightCurrDot = rightDots[n];
            dRightX = _rightCenterPt.x+Math.sin(rightCurrDot.ang)*rightCurrDot.radius;
            dRightY = _rightCenterPt.y+Math.cos(rightCurrDot.ang)*rightCurrDot.radius;

            rightCurrDot.ang += rightCurrDot.speed;

            //console.log(currDot);
            _context.fillStyle= rightCurrDot.fillColor;
            _context.fillRect(dRightX, dRightY, dotRad, dotRad);
        }

        console.log(leftCurrDot.speed);

         window.requestAnimationFrame(drawPoints);
    }

    function resizeHandler(){
      var box = cvs.getBoundingClientRect();
      var w = box.width;
      var h = box.height;
      cvs.width = w;
      cvs.height = h;
      leftCenterPt.x = Math.round(w/2 - minRad - ((maxRad - minRad)/2));
      leftCenterPt.y = Math.round(h/2);
      rightCenterPt.x = Math.round(w/2 + minRad + ((maxRad - minRad)/2));
      rightCenterPt.y = Math.round(h/2);
    }

    drawPoints();

});