如何为HTML Canvas轮盘设置#043F45深浅交替背景色

要实现轮盘扇形的深浅交替样式，只需替换原来的彩虹色生成逻辑，改为基于索引奇偶性切换指定色系的深浅色，具体操作如下：

1. 定义深浅目标颜色 #

指定深色为#043F45，浅色选用同色系提亮版本（示例用#07616A，你可根据视觉需求调整亮度）。

2. 替换颜色生成逻辑 #

在drawRouletteWheel函数的循环中，把调用getColor生成彩虹色的代码，替换为根据当前扇形索引的奇偶性切换深浅色：

修改前：

ctx.fillStyle = getColor(i, options.length);

修改后：

const darkColor = '#043F45';
const lightColor = '#07616A'; // 可自定义调整浅色亮度
ctx.fillStyle = i % 2 === 0 ? darkColor : lightColor;

3. 可选：精简无用代码 #

由于不再需要彩虹色生成逻辑，可删除以下冗余函数：

• byte2Hex
• RGB2Color
• getColor

修改后的完整代码 #

JavaScript 部分

var options = ["$100", "$10", "$25", "$250", "$30", "$1000"];

var startAngle = 0;
var arc = Math.PI / (options.length / 2);
var spinTimeout = null;

var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var ctx;

document.getElementById("spin").addEventListener("click", spin);

function drawRouletteWheel() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var outsideRadius = 200;
    var textRadius = 160;
    var insideRadius = 125;
    const darkColor = '#043F45';
    const lightColor = '#07616A'; // 同色系浅色，可自定义调整

    ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 500, 500);

    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < options.length; i++) {
      var angle = startAngle + i * arc;
      // 切换深浅交替颜色
      ctx.fillStyle = i % 2 === 0 ? darkColor : lightColor;

      ctx.beginPath();
      ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
      ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();

      ctx.save();
      ctx.shadowOffsetX = -1;
      ctx.shadowOffsetY = -1;
      ctx.shadowBlur = 0;
      ctx.shadowColor = "rgb(220,220,220)";
      ctx.fillStyle = "black";
      ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
        250 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = options[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      ctx.restore();
    }

    //Arrow
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
    ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.fill();
  }
}

function spin() {
  spinAngleStart = Math.random() * 10 + 10;
  spinTime = 0;
  spinTimeTotal = Math.random() * 3 + 4 * 1000;
  rotateWheel();
}

function rotateWheel() {
  spinTime += 30;
  if (spinTime >= spinTimeTotal) {
    stopRotateWheel();
    return;
  }
  var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
  startAngle += (spinAngle * Math.PI / 180);
  drawRouletteWheel();
  spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
  clearTimeout(spinTimeout);
  var degrees = startAngle * 180 / Math.PI + 90;
  var arcd = arc * 180 / Math.PI;
  var index = Math.floor((360 - degrees % 360) / arcd);
  ctx.save();
  ctx.font = 'bold 30px Helvetica, Arial';
  var text = options[index];
  ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
  ctx.restore();
}

function easeOut(t, b, c, d) {
  var ts = (t /= d) * t;
  var tc = ts * t;
  return b + c * (tc + -3 * ts + 3 * t);
}

drawRouletteWheel();

HTML 部分（无需修改）

<input type="button" value="SPIN" style="float:left;background:#A07F3D;color:white;margin-left:2%" id='spin' />
<canvas id="canvas" width="500" height="500"></canvas>

内容的提问来源于stack exchange，提问作者TBC