繁体   English   中英

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

Is there a way to blend multiple CanvasGradients together?

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

我正在绘制一个相互绘制的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实现的效果:

在此处输入图像描述

问题暂未有回复.您可以查看右边的相关问题.
1 一种将多个记录一起插入的方法?

我想看看是否有办法改进数据的插入和更新方式。 我正在使用 ORACLE DB 和 JDBC。 我正在做的当前方法是在检查toUpdate是否为true之后使用 FOR 循环更新(例如)客户记录。 一个示例,例如下面的示例代码,然后调用现有的 DAO update()来执行此操作。 但这不允许将多个 ...

5 使用ImageMagic融合多个图像

我的问题如下: 我有几个.png文件。 每个文件都有一个特定颜色的小斑点。 所有文件具有相同的大小。 我的问题是如何将它们叠加在一起,以使不同颜色的斑点成为这些颜色的混合,而一种颜色不会与另一种颜色完全重叠? -flatten选项-flatten图像,但是在示例中,橙色(i ...

6 CGContext 中的多种混合模式

我正在绘制一个 CGContext。 为了简化情况,假设我有两个 CGPath 的 collections。 对于顶部的集合,当图层中的两条路径重叠时,我只想让顶部路径覆盖另一个,所以我使用destinationOver的混合模式。 但是当混合顶部集合和底部集合时,我想混合它们的颜色,所以我想使用正 ...

8 将多个对象合并在一起的更有效方法

所以我正在尝试创建一个包含多个对象的数组,但首先我需要将两种对象合并为一种,然后将其添加到数组中。 这样做的原因是我可以在视图中循环遍历数组并轻松显示内容。 我正在使用树不同的对象,用户,玩家和团队。 用户通过玩家拥有多个玩家和多个团队。 我需要直观地显示团队对象和播放器对象的信息,但我 ...

9 混合多个 MTLTexture

我正在尝试找出在 Metal 中处理相互叠加的多个纹理的最佳方法。 目标是具有以下功能: 许多纹理分层。 (10 到 20) 每个纹理的位置/比例控制。 每个纹理的混合模式支持 - (屏幕,乘法等),因此需要不透明度。 把它想象成 Photoshop 中的图层树。 我已经开始了这个项目,并且有一 ...

10 渐变混合多个图像

如何使用 CSS 使多个图像仅在特定区域相互渐变,如下图所示? 我试过的: .container { position: relative; display: flex; height: 200px; }.container:before { content: ''; position: abs ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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