代码之家 › 专栏 › 技术社区 › jon

javascript生成类似的随机颜色(着色器||着色||单色)

code-snippets shader colors random javascript

jon · 技术社区 · 8 年前

(嗨)我不是色度学专家,但我想知道如何实现一个脚本,生成随机颜色,但基于主色。

可能是随机的色调

例如#f25f9a。 http://www.color-hex.com/color/f25f9a

#f25f9a
#f36fa4
#f47eae
#f58fb8
#f79fc2
#f8afcc
#f9bfd6
#fbcfe0
#fcdfea
#fdeff4
#ffffff

所以我需要做一个随机的颜色

function colors() { return ('0x' + Math.floor(Math.random() * 16777215).toString(16) || 0xffffff) };

function ColorToHex(hexb){return '#'+hexb.slice(2);}

然后基于ColorToHex生成随机着色或着色器或单色颜色它用于插件开发,带有用于调试sprite的框架。

谢谢你的帮助,如果你知道任何片段?。

3 回复 | 直到 8 年前

Nina Scholz 8 年前

您可以将单色的增量设置为255,作为随机乘法的可变部分。为每个颜色取相同的随机值,并以想要的格式构建一个字符串。

function getRandomColor(color) {
    var p = 1,
        temp,
        random = Math.random(),
        result = '#';

    while (p < color.length) {
        temp = parseInt(color.slice(p, p += 2), 16)
        temp += Math.floor((255 - temp) * random);
        result += temp.toString(16).padStart(2, '0');
    }
    return result;
}


var color = '#f25f9a',
    i,
    rc;

for (i = 0; i < 10; i++) {
    rc = getRandomColor(color);
    document.body.innerHTML += '<div style="background-color: ' + rc + ';">' + rc + '</div>';
}

Kaiido NickSlash 8 年前

该解决方案使用屏幕外画布绘制渐变,然后从该渐变中提取像素。

// returns an array of CSS color strings
// @from: CSS color string of first color
// @to: CSS color string of last color
// @numberOfShades: number of shades to be returned (from and end included)
function getGradColors(from, to, numberOfShades){
  // generate a canvas context and store it in cache
  var ctx = getGradColors.ctx || (getGradColors.ctx = document.createElement('canvas').getContext('2d'));
  // set our canvas dimensions according to the number of shades required
  var w = ctx.canvas.width = numberOfShades || 10;
  ctx.canvas.height = 1;
  // create a linear gradient
  // (to keep 'from' and 'to' values, we set its x to 1 and width to width -1) 
  var grad = ctx.createLinearGradient(1,0,w-1, 0);
  grad.addColorStop(0, from || 'white');
  grad.addColorStop(1, to || 'black');
  ctx.fillStyle = grad;
  ctx.fillRect(0,0,w,1);   // draw it
  var data = ctx.getImageData(0,0,w,1); // get the pixels info ([r, g, b, a, r, g...])
  var colors = [];
  data.data.forEach(function(comp, i){
    if(i%4===0){ // map each pixel in its own array
      colors.push([]);
      }
    if(i%4===3){ // alpha
      comp /= 255;
      }
    colors[colors.length - 1].push(comp);
    });
  return colors.map(function(c){
    // return a CSS computed value
    ctx.fillStyle = 'rgba('+c.join()+')';
    return ctx.fillStyle;
    });
  }
  
var shadesOfWhite = getGradColors('#f25f9a', 'white', 10);
console.log('to white: ', shadesOfWhite);
shadesOfWhite.forEach(generateSpan);

container.appendChild(document.createElement('br'));

var shadesOfBlack = getGradColors('#f25f9a', 'black', 10);
console.log('to black: ', shadesOfBlack);
shadesOfBlack.forEach(generateSpan);

function generateSpan(color){
  var span = document.createElement('span');
  span.style.backgroundColor = color;
  container.appendChild(span);
  }

#container > span{
  width: 10vw;
  height: 5vw;
  display: inline-block;
  }
body{margin: 0}

<div id="container"></div>

bukke hari prasad 8 年前

let randomColor = Math.ceil((Math.random() * Math.pow(255, 3))).toString(16);
      while (randomColor.length < 6) {
        randomColor = '0' + randomColor;
      }
      randomColor = '#' + randomColor;