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;
 }