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