簡體   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