如何为画布 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，次数不限。