有没有办法将多个 CanvasGradients 混合在一起？

问题描述

I'm drawing a grid of CanvasGradient objects that draw over each other.我正在绘制一个相互绘制的CanvasGradient对象网格。 Instead of drawing over each other I want to achieve a mixed blended effect like "2D meta balls" or interpolating between the gradients somehow.我不想相互绘制，而是想实现混合混合效果，如“2D 元球”或以某种方式在渐变之间插值。

I tried using this setting https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation but I wasn't able to achieve the blended effect between the gradients我尝试使用此设置https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation但我无法实现渐变之间的混合效果

    this.ctx.clearRect(0, 0, this.canvas_width, this.canvas_height);

    let background_color = "#"+this.colorstops[7].getHexString();
    this.ctx.fillStyle = background_color;
    this.ctx.rect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.fill();

    let step = this.canvas_width/this.sensor_width;
    let radius_size = step / 2;

    let y = step/2;
    let x = this.canvas_height - step/2;
    let length = _array.length + 1;
    for(let i=1; i<length; i++) {
        
        let value = _array[i-1];
        let radius = reMap(value, 0, 500, 0, radius_size+20);
        
        this.ctx.beginPath();
        let gradient = this.ctx.createRadialGradient(y, x, radius, y, x, 0);
        for(let i=1; i<this.positions.length; i++) {
            gradient.addColorStop(this.positions[i], "#"+this.colorstops[i].getHexString());
        }
        
        this.ctx.arc(y, x, radius, 0, 2 * Math.PI);
        this.ctx.fillStyle = gradient;
        this.ctx.fill();
        this.ctx.closePath();
        
        
        y += step;
        if(i % 10 == 0) {
            x -= step;
            y = step/2;
        }
    }

This is how the output looks:这是 output 的外观：

This is the effect I'm trying to achieve with CanvasGradients :这是我试图用CanvasGradients实现的效果：