如何去除圆圈文字的阴影？

Question

图中的想法是只在白色圆圈上放置阴影，但看起来阴影效果已应用于文本，这不应该发生。

Canvas:

   <canvas class="gradient" id="canvas_gradient_chart" height="70"></canvas>

Javascript:

 drawChartGradient(canvas, radian, height, metric) {
        const rect = canvas.getBoundingClientRect();
        const ctx = canvas.getContext("2d");
        canvas.width  = rect.width;
        canvas.height = height;
        ctx.beginPath();
      
        const centerY = canvas.height / 2;
        const centerX = this.positionXChart(canvas.width, metric, 20);
       
        ctx.arc(centerX, centerY, radian, 0, Math.PI * 2, false);
        ctx.fillStyle ="#ffffff";
        ctx.filter = 'drop-shadow(2px 2px 5px rgba(0,0,0,0.6))';
    
        ctx.fill();
       
        ctx.font = 'bold 14pt sans-serif';
        ctx.textAlign = 'center';
        ctx.strokeStyle ='#ffffff'
        ctx.stroke();
        ctx.fillStyle ="#622BCF";  // <-- Text colour here
        ctx.shadowBlur=0;
        ctx.shadowColor='transparent';
        ctx.fillText(`${metric ? metric : 0}`, centerX, centerY+8);
        //ctx.globalCompositeOperation = 'destination-over';
        ctx.globalCompositeOperation = 'source-over';
          canvas.addEventListener('mousemove', (e) => {
            const relativeCoodinates = {
              x:parseInt(`${centerX}`), 
              y:parseInt(`${centerY}`),
              r:radian
            }
          });
        ctx.globalCompositeOperation = 'destination-over';
        ctx.save();
        ctx.restore();
      }

      positionXChart(size, number, distance) {
       return size/(200 + distance) * (parseInt(`${number}`) + 100 + distance / 2);
      }

Canvas 会呈现：

Answer 1

您必须重置过滤器，否则将对所有元素应用相同的过滤器：
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter#value

查看工作示例：

const canvas = document.getElementById("canvas")
const ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.arc(50, 50, 40, 0, Math.PI * 2)
ctx.fillStyle = "#ffffff"
ctx.filter = 'drop-shadow(2px 2px 5px)'
ctx.fill()

ctx.beginPath()
ctx.font = 'bold 30pt sans-serif'
ctx.textAlign = 'center'
ctx.textBaseline = "middle"
ctx.fillStyle = "#622BCF" // <-- Text colour here
ctx.filter = 'none'
ctx.fillText("80", 50, 50)

<canvas  id="canvas" ></canvas>

我认为 textBaseline = "middle" 在保持文本居中方面做得很好

如何去除圆圈文字的阴影？

How to remove shadow from text in circle?

javascript

canvas

angular