Javascript 获取随机颜色的几种方式

  • 2020 年 4 月 14 日
  • 笔记
先认识一下颜色值的表达方式
#FFFFFF,由6位16进制数组成。
#FFFFFFFF,由8位16进制数组成,前6位表示颜色,后两位数表示透明度,数值越大,透明度越小。
rgb(255,255,255),由3位0-255之间的数字组成。
rgba(255,255,255,.5),最后一位0-1之间的小数,表示透明度,数值越大,透明度越小。
随机生成格式为#FFFFFF的颜色值
随机生成6位0-15之间的数字,再用toString(16)将数字转成16进制。
//随机生成6位16进制数的颜色值 #FFFFFF
function randomColor() {
   var color = “#”;
   //for循环中,如果后面仅有一条语句,{}可省略不写
   //随机生成6位0-15之间的数字,再用toString(16)将数字转成16进制
   for (var i = 0; i < 6; i++) color+=parseInt(Math.random() * 16).toString(16);
   return color;
}
12345678
随机生成带透明度的16进制的颜色值
跟第一种方法类似,随机生成8位0-15之间的数字,再用toString(16)将数字转成16进制。
//#ff0000ff 后两位是透明度,数值越大,颜色越深
function randomColor() {
   var color = “#”;
   //for循环中,如果后面仅有一条语句,{}可省略不写
   //同上面方法
    for (var i = 0; i < 8; i++) color+=parseInt(Math.random() * 16).toString(16);
    return color;
}
12345678
获取生成RGB格式的随机颜色值
随机生成3位0-255之间的数字,字符串进行拼接。
//获取随机颜色 rgb(255,255,255)
function randomColor(){
     var color=”rgb(“;
     for(var i=0;i<3;i++) color+=parseInt(Math.random()*256)+”,”;
     //去除最后一个逗号
     // color=color.slice(0,-1)
     color=color.substring(0,color.length-1)+”)”;
     return color;
 }
123456789
获取生成RGBA格式的随机颜色值
随机生成3位0-255之间的数字,如果有传入透明度的值,将按照用户传入的值来渲染。如果没有传入透明度的值,则随机生成透明度。
需要注意的是Math.random()只能生成0-1之间的小数,不包含0跟1,Math.random()*10,是1-10之间的整数,除以10再四舍五入,就有可能得到0或者1。
function randomColor(alpha){
     //判断有没有传入透明值,没有传入的话,随机生成0-1之间的小数
     //Math.random()只能生成0-1之间的小数,不包含0跟1,Math.random()*10,是1-10之间的整数,除以10再四舍五入,就有可能得到0或者1.
     alpha = alpha==undefined? (Math.random()*10/10).toFixed(1) : alpha;
     //将参数转化成数值
     alpha=Number(alpha);
     //如果传入的参数是非数值,则让透明度为1
     if(isNaN(alpha)) alpha=1;
     //颜色拼接
     var color = “rgba(“;
     for(var i=0;i<3;i++){
         color+=parseInt(Math.random()*256)+”,”;
     }
     color+= alpha+”)”;
     return color;
 }