여러 가지 색/균일하지 않은 그라디언트

Question

html 캔버스 또는 처리와 같은 그래디언트 효과를 만들려고합니다. 여러 가지 색깔의/비 균일 한, 다소 임의적 인. 내 첫 번째 성향은 여러 점을 만들고, 색과 무게를 할당 한 다음 캔버스의 각 픽셀 색을 각 점의 1/R^2 함수로 보간하는 것입니다.

다른 제안 사항에 대한 의견이 명확합니다. 감사!

Answer 1

는 I는 HTML5 캔버스 직쇄 및/또는 방사형 그라데이션 방법 랜덤 컬러 정지를 생성하는 작은 기능 ...

HTML

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

스크립트을

/* 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보기 사람에게 유용 할 수 있습니다.