有沒有辦法將多個 CanvasGradients 混合在一起？

問題描述

我正在繪制一個相互繪制的CanvasGradient對象網格。 我不想相互繪制，而是想實現混合混合效果，如“2D 元球”或以某種方式在漸變之間插值。

我嘗試使用此設置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;
        }
    }

這是 output 的外觀：

這是我試圖用CanvasGradients實現的效果：