紹

randomColor是一個生成隨機顏色的JavaScript腳本，對于寫代碼的我們來說，生成一個隨機顏色或許并不復雜，但是想要生成一個比較吸引人的隨機顏色可能是需要花費一番功夫的，但如果已經有人實現了這樣一個小功能，那么我們直接使用即可，不需要再花費心思研究那么深，一起來看看吧！

randomColor已移植到C＃，C ++，Go，Haskell，Mathematica，PHP，Python，Swift，Perl6，Objective-C，Java，R，Reason和Rust。

Github地址

https://github.com/davidmerfield/randomColor

使用方式

本文只是簡單介紹下在瀏覽器中使用，我相信在Web開發中使用的還是最多的，我們可以直接使用cdn或者下載腳本下來直接引入：

• 使用

var color=randomColor();

要在服務器上使用帶有node.js的randomColor，請從npm安裝randomColor，然后調用腳本：

var randomColor=require('randomcolor'); // 引入
var color=randomColor(); // 16進制

• 配置

可以傳遞配置對象以便于產生特定的結果出來：

hue ——控制生成的顏色的色調。可以傳代表顏色名稱的字符串：當前支持紅色，橙色，黃色，綠色，藍色，紫色，粉紅色和黑白（red, orange, yellow, green, blue, purple, pink 和 monochrome）。如果您傳遞十六進制顏色字符串（例如＃00FFFF），則randomColor將提取其色相值并使用該值生成顏色

luminosity——控制所生成顏色的亮度。您可以指定一個包含亮，亮或暗的字符串（bright, light or dark）。

count——指定要生成的顏色數

seed 一個整數或字符串，該整數或字符串在傳遞時將導致randomColor每次返回相同的顏色。

format ——指定生成的顏色的格式。可能的值為rgb，rgba，rgbArray，hsl，hsla，hslArray和hex（默認值）。

alpha ——介于0和1之間的十進制數。僅當使用帶有alpha通道的格式（rgba和hsla）時才相關。默認為隨機值。

• 示例代碼

// 返回具顏色的十六進制代碼
randomColor(); 

// 返回十個綠色的數組
randomColor({
   count: 10,
   hue: 'green'
});

// 返回淺藍色的十六進制代碼
randomColor({
   luminosity: 'light',
   hue: 'blue'
});

// 返回“真正隨機”顏色的十六進制代碼
randomColor({
   luminosity: 'random',
   hue: 'random'
});

// 返回RGB的明亮的顏色
randomColor({
   luminosity: 'bright',
   format: 'rgb' // e.g. 'rgb(225,200,20)'
});

// 返回帶有隨機alpha的深色RGB顏色
randomColor({
   luminosity: 'dark',
   format: 'rgba' // e.g. 'rgba(9, 1, 107, 0.6482447960879654)'
});

// 返回具有指定alpha的深色RGB顏色
randomColor({
   luminosity: 'dark',
   format: 'rgba',
   alpha: 0.5 // e.g. 'rgba(9, 1, 107, 0.5)',
});

// 返回帶有隨機Alpha的淺色HSL顏色
randomColor({
   luminosity: 'light',
   format: 'hsla' // e.g. 'hsla(27, 88.99%, 81.83%, 0.6450211517512798)'
});

總結

randomColor是一個小型JavaScript腳本，雖然功能不多，但是針對顏色這一塊還是非常值得使用的，對于大多數場景已經完全夠用！enjoy it！

5 新特性

1、拖拽釋放(Drap and drop) API ondrop

拖放是一種常見的特性，即抓取對象以后拖到另一個位置

在 HTML5 中，拖放是標準的一部分，任何元素都能夠拖放

2、自定義屬性 data-id

3、語義化更好的內容標簽(header,nav,footer ,aside, article, section)

4、音頻 ,視頻(audio,video) 如果瀏覽器不支持自動播放怎么辦?

在屬性中添加 autoplay

5、畫布 Canvas

（5.1）getContext()

方法返回一個用于在畫布上繪圖的環境Canvas.getContext(contextID)參數 contextID 指定了您想要在畫布上繪制的類型。當前唯一的合法值是 “2d”，它指定了二維繪圖，并且導致這個方法返回一個環境對象，該對象導出一個二維繪圖 API

（5.2）cxt.stroke() 如果沒有這一步 線條是不會顯示在畫布上的

（5.3）canvas 和 image 在處理圖片的時候有什么區別?

image 是通過對象的形式描述圖片的,canvas 通過專門的 API 將圖片繪制在畫布上.

6、 地理(Geolocation) API

7、本地離線存儲 localStorage 長期存儲數據 瀏覽器關閉后數據不丟失

8、sessionStorage 的數據在瀏覽器關閉后自動刪除

9、表單控件 calendar ,date , time , email , url , search , tel , file , number

10、新的技術 webworker,

websocket , Geolocation

CSS3 新特性

1、顏色: 新增 RGBA , HSLA 模式

2、文字陰影(text-shadow)

3、邊框: 圓角(border-radius) 邊框陰影 : box-shadow

4、盒子模型: box-sizing

5、背景:background-size

background-origin

background-clip

6、漸變: linear-gradient , radial-gradient

7、過渡 : transition 可實現動畫

8、自定義動畫 animate

@keyfrom

9、媒體查詢 多欄布局

@media screen and (width:800px) {…}

10、border-image

11、2D轉換;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

12、3D 轉換

13、字體圖標 font-face

14、彈性布局 flex