多色/非均一グラデーション

Question

このようなグラデーションエフェクトを作成する場合、htmlキャンバスまたは処理のいずれかを作成します。多色/非一様、ややランダム。私の最初の傾きは、いくつかの点を作成し、それらに色と重みを割り当て、キャンバス上の各ピクセルの色を各点から1/R^2の関数で補間することです。

他の提案が確実に公開されています。ありがとう！

Answer 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(); 

functi randomColorStops()は、引数（ここではランダムにnos()を介して生成される）として数字をとり、それぞれが 'stops'と 'color'プロパティを持つ順序付けられたオブジェクトの配列を返します。これは反復され、グラジエント変数（grad）に追加されます。それは誰か

に役に立つかもしれない

はjsFiddle of the above codeを参照してください。