如何为canvas HTML 的文本和背景设置不同的颜色？

Question

我正在使用画布创建一个动态的命运之轮。每当我添加新项目时，它都会均匀地重新计算空间。我能够使用画布实现这一点。我知道这canvas.fillStyle = somecolor;会将我想要的颜色设置为正在创建的切片。我还想在每个切片中添加一些文本。但是，我无法找到一种方法让画布绘制与切片颜色不同的文本。这可能吗？

这就是我正在做的

  const drawSlice = useCallback((deg: number, color: string, text:string) => {
    if (!canvasRef.current) {
        return;
      }
      const canvas: HTMLCanvasElement = canvasRef.current;
      const ctx = canvas.getContext("2d");

      const width = canvas.width;
      const center = width/2;
      const sliceDeg = 360 / wheelItems.length;

      if (ctx) {
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.fillText(text, center, deg2rad(deg));

        ctx.moveTo(center, center);
        ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
        ctx.lineTo(center, center);
        ctx.fill();

      }
  },[wheelItems.length])

Answer 1

如果我正确理解你的问题，你可能想ctx.fillStyle在绘制文本和绘制切片之间进行更改。

if (ctx) {
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.fillText(text, center, deg2rad(deg));

    // here :
    ctx.fillStyle = color2;
    ctx.moveTo(center, center);
    ctx.arc(center, center, width / 2, deg2rad(deg), deg2rad(deg + sliceDeg));
    ctx.lineTo(center, center);
    ctx.fill();
}

您可以ctx.fillStyle随时更改，更改次数不限。