简体   繁体   中英

Is there a way to blend multiple CanvasGradients together?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文简体   中文繁体   中英对照 版本,有任何建议请联系yoyou2525@163.com。

I'm drawing a grid of CanvasGradient objects that draw over each other. Instead of drawing over each other I want to achieve a mixed blended effect like "2D meta balls" or interpolating between the gradients somehow.

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

    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:

在此处输入图像描述

This is the effect I'm trying to achieve with CanvasGradients :

在此处输入图像描述

No answers.You can refer to the related questions on the right.
9 Blend multiple MTLTextures

I'm trying to figure out the best way to handle multiple textures layered on top of each other in Metal. The objective is to have the following featur ...

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM