简体   繁体   English

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

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

在此处输入图像描述

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

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

2 有没有办法将来自多个来源的数据与 Google 的新 BigQuery 混合? - Is there a way to blend data from multiple sources with Google's new BigQuery?

我有一些数据表已加载到 Google Cloud Console 中以用于 BigQuery。 最初我是通过学习手动编写查询来工作的(刚接触该平台,但对 SQL 查询结构有一些基本知识),但随着 Connected Sheets 的发布,与我一起工作的一些其他人也能够使用数据集创建更好的报告在不知 ...

3 LightSwitch和Expression Blend-它们会一起工作吗? - LightSwitch and Expression Blend - Will they work together?

LightSwitch与Blend结合使用的效果如何? 我在一些视频中看到可以在LS中使用自定义Silverlight控件,并且自然可以使用Blend创建它们。 但是Blend本身可以用于自定义LightSwitch应用程序的屏幕吗? 似乎LS不使用Xaml,而是将所有屏幕都放在app ...

5 使用ImageMagic融合多个图像 - Blend multiple images with ImageMagic

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

8 将多个对象合并在一起的更有效方法 - A more efficient way to merge multiple objects together

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

9 混合多个 MTLTexture - Blend multiple MTLTextures

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

暂无
暂无

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

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