如何更改Javascript/Html画布图像的色相

// 获取画布对象和上下文
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 加载图像到画布
var image = new Image();
image.src = "image.jpg";
image.onload = function() {
  // 将图像绘制到画布上
  ctx.drawImage(image, 0, 0);

  // 获取图像数据
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;

  // 转换图像数据为HSV颜色空间
  for (var i = 0; i < data.length; i += 4) {
    var r = data[i];
    var g = data[i + 1];
    var b = data[i + 2];

    // 转换为HSV颜色空间
    var hsv = rgbToHsv(r, g, b);

    // 修改色相值（例如增加30度）
    hsv.h += 30;

    // 将修改后的HSV颜色空间转换回RGB
    var rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);

    // 更新图像数据
    data[i] = rgb.r;
    data[i + 1] = rgb.g;
    data[i + 2] = rgb.b;
  }

  // 更新画布上的图像
  ctx.putImageData(imageData, 0, 0);
};

// RGB转换为HSV
function rgbToHsv(r, g, b) {
  r /= 255, g /= 255, b /= 255;

  var max = Math.max(r, g, b),
      min = Math.min(r, g, b);
  var h, s, v = max;

  var d = max - min;
  s = max === 0 ? 0 : d / max;

  if (max === min) {
    h = 0; // 无色相
  } else {
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }
    h /= 6;
  }

  return {
    h: h * 360,
    s: s * 100,
    v: v * 100
  };
}

// HSV转换为RGB
function hsvToRgb(h, s, v) {
  h /= 360;
  s /= 100;
  v /= 100;

  var r, g, b;
  var i = Math.floor(h * 6);
  var f = h * 6 - i;
  var p = v * (1 - s);
  var q = v * (1 - f * s);
  var t = v * (1 - (1 - f) * s);

  switch (i % 6) {
    case 0:
      r = v, g = t, b = p;
      break;
    case 1:
      r = q, g = v, b = p;
      break;
    case 2:
      r = p, g = v, b = t;
      break;
    case 3:
      r = p, g = q, b = v;
      break;
    case 4:
      r = t, g = p, b = v;
      break;
    case 5:
      r = v, g = p, b = q;
      break;
  }

  return {
    r: Math.round(r * 255),
    g: Math.round(g * 255),
    b: Math.round(b * 255)
  };
}