在图形中,这个 idea 是只在白色圆圈上加一个阴影,但看起来阴影效果应用于文本,这是不应该发生的.

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 would render:

enter image description here

推荐答案

You have to reset the filter or the same will be applied to all elements:
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"在保持文本中心方面做得很好

Javascript相关问答推荐

空的结果抓取网站与Fetch和Cheerio

Chromium会将URL与JS一起传递到V8吗?

如何将未排序的元素追加到数组的末尾?

与svg相反;S getPointAtLength(D)-我想要getLengthAtPoint(x,y)

如何在一个对象Java脚本中获取不同键的重复值?

当我点击一个按钮后按回车键时,如何阻止它再次被点击

Next.js无法从外部本地主机获取图像

Socket.IO在刷新页面时执行函数两次

ReferenceError:无法在初始化之前访问setData

AG-GRIDreact 显示布尔值而不是复选框

当达到高度限制时,如何裁剪图像?使用html和css

在每次重新加载页面时更改指针光标

如何调整下拉内容,使其不与其他元素重叠?

找不到处于状态的联系人

JavaScript -如何跳过某个字符(S)来打乱字符串中的字符

浮动标签效果移除时,所需的也被移除

观察子组件中的@Output事件emits 器?

如何将缓冲区数组转换回音频

不会执行不返回值的快速路径作为函数

我怎样才能同步两个Java脚本函数呢?