如何使用javascript在绘图中旋转数据点的文本标签

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

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "12px Arial";
ctx.fillStyle = "black";

var dataPoints = [
  { x: 50, y: 100, label: "Point 1" },
  { x: 150, y: 200, label: "Point 2" },
  { x: 250, y: 300, label: "Point 3" }
];

dataPoints.forEach(function(point) {
  // 绘制数据点
  ctx.beginPath();
  ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
  ctx.fill();

  // 旋转文本标签
  ctx.save();
  ctx.translate(point.x, point.y);
  ctx.rotate(Math.PI / 4); // 旋转角度，这里是45度
  ctx.fillText(point.label, 0, 0);
  ctx.restore();
});