如何为画布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.fillStyleif (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