基于光标接近程度的HTML5画布元素颜色更改

<canvas id="myCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousemove", changeColor);

function changeColor(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  
  var distance = Math.sqrt(Math.pow(x - rect.width / 2, 2) + Math.pow(y - rect.height / 2, 2));
  var maxDistance = Math.sqrt(Math.pow(rect.width / 2, 2) + Math.pow(rect.height / 2, 2));
  var color = "rgb(" + Math.floor(distance / maxDistance * 255) + ", 0, 0)";
  
  canvas.style.backgroundColor = color;
}