多色/非均匀渐变答案

【问题标题】：Multicolored / Non uniform Gradient多色/非均匀渐变
【发布时间】：2016-08-08 19:47:29
【问题描述】：

希望在 html 画布或处理中创建像这样的渐变效果。多色/不均匀，有些随机。我的第一个倾向是创建几个点，为它们分配颜色和权重，然后通过每个点的 1/R^2 函数对画布上的每个像素颜色进行插值？

绝对愿意接受其他建议。谢谢！

【问题讨论】：

听起来您有一种想尝试的方法。你为什么不试试呢？如果遇到困难，请尝试一下并发布minimal reproducible example。
使用内置画布函数似乎可以获得可接受的效果。你可以create各种gradients和mash them together。
我想我看到几个径向毕业生混合在一起
这个答案将涵盖一些你可以用来达到你想要的效果的技术。 stackoverflow.com/a/35526320/3877726 它有一个演示 sn-p 并使用蒙版来分层渐变和各种复合方法来混合颜色。您还可以使用剪辑区域而不是蒙版

标签： canvas html5-canvas processing p5.js

【解决方案1】：

我有一个小功能可以为 HTML5 Canvas 线性和/或径向渐变方法创建随机颜色停止...

HTML

<canvas id="cnv" width="300" height="200"></canvas>

JavaScript

/* simple selection */
var $ = function(a) {return document.getElementById(a.slice(1));};

var randomColorStops = function(num) {
    var arr = [];
    var stops = [];
    var L = num;
    var obj;

    var randomRGB = function() {
        var colorValue = function() {
            return Math.floor(Math.random() * 255);
        };
        return 'rgb('+colorValue()+','+colorValue()+','+colorValue()+')';
    };

    while(L--) {
        arr.push(
            parseFloat(
                (Math.random()).toFixed(2)
            )
        );
    }

    arr.sort();
    L = num;

    while(L--) {
        obj = {
            stop: arr[L],
            color: randomRGB()
        };
        stops.push(obj);
    }

    return stops;
}

/* canvas properties */
var canvas = $('#cnv');
var ctx = canvas.getContext('2d');
var cx = canvas.width / 2;
var cy = canvas.height / 2;
var cr = canvas.height * 0.45;

/* number of stops: random number 5-50 */
var nos = function() {
     return Math.floor(Math.random() * 45) + 5;
};

/* create radial gradient */
var grad = ctx.createRadialGradient(
    cx - (cr * 0.33),
    cy - (cr * 0.33),
    2,
    cx - (cr * 0.33),
    cy - (cr * 0.33),
    cr * 1.66
);

/* !!! stops = random number of random colour-stops */
var stops = randomColorStops(nos());
var len = stops.length;

/* iterate stops and add to grad */
for (var i = 0; i < len; i++) {
    grad.addColorStop(stops[i].stop, stops[i].color);
}

/* draw to canvas */

/* background: black */
ctx.fillStyle = '#000';
ctx.beginPath();
ctx.fillRect(0, 0, canvas.width, canvas.height);

/* circle: random gradient */
ctx.fillStyle = grad;
ctx.beginPath();
ctx.arc(cx, cy, cr, 0, Math.PI*2, true);
ctx.fill();

函数randomColorStops() 接受一个数字作为参数（这里通过nos() 随机生成）并返回一个有序对象数组，每个对象都有一个“停止”和“颜色”属性。然后将其迭代并添加到梯度变量 (grad)。

它可能对某人有用

请参阅jsFiddle of the above code。

【讨论】：