根据光标位置在画布中旋转箭头

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

canvas.addEventListener("mousemove", function(event) {
  var rect = canvas.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;

  // 在这里进行箭头的旋转操作
});

// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 计算箭头的旋转角度
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var angle = Math.atan2(mouseY - centerY, mouseX - centerX);

// 绘制箭头
ctx.translate(centerX, centerY);
ctx.rotate(angle);
ctx.beginPath();
ctx.moveTo(0, -50);
ctx.lineTo(20, -20);
ctx.lineTo(10, -20);
ctx.lineTo(10, 20);
ctx.lineTo(-10, 20);
ctx.lineTo(-10, -20);
ctx.lineTo(-20, -20);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
ctx.rotate(-angle);
ctx.translate(-centerX, -centerY);