大家來看這篇文章，想必都瞭解過wordle。但是wordle難以運用於自己專案的web展示。

於是我著手自己寫了一個，這裡給大家介紹一下方法。相信大家也能迅速的構建一個wordCloud,

該專案在gitHub地址：https://github.com/Leannechn/WordCloud.git

先看看效果吧，顏色可以自己定義，這裡我就以單色顯示：

資料格式：

首先我們先分析一下實現步驟：

在wordle中，採用的是不斷產生隨機位置，進行碰撞測驗，如果被測驗位置是空白則填充文字。那麼統一

1、文字位置是相對集中的隨機數（正態分佈於中心點位置）；

2、碰撞測驗；

3、優化碰撞測驗；

現在我們來一一解決問題：

1、正態分佈的隨機數：大家都知道Math.random( ) 產生的是均勻隨機數，也就是文字會均勻的分佈在整個畫布中。那麼到底如何生成正態分佈的隨機數呢。

生成的演算法很簡單：假設，我們用Math.random( ) 生成N個隨機數，則這N個隨機數的平均數趨近與0.5 。當N值越大，平均數趨近0.5的概率就越大，反之，概率越小 。想看原理的親可另行了解正態分佈的演算法。總而言之，n個（0,1）之間的隨機數的平均數以0.5為中心程正態分佈。n值越大隨機值越集中。

Math.floor(arr.reduce(function(i,j){return i+j})/n*(max-min))+min;

這樣我們就取到了以（min,max）中心點正態分佈的隨機值。

2、碰撞測驗：利用canvas的 .getImageData(x,y,width,height)

 .getImageData(x,y,width,height)的返回值是一個一位陣列。假設該矩形中用N 個畫素點，每個畫素點則由4個值決定即：r g b a；那麼這個一位陣列的長度為n*4,

於是，我們只要判斷其中是否有畫素資訊即可。如果為空白則，所有的值都為0；如果碰撞，則重新生成隨機值。

到此為止，製作水平方向的標籤雲已經沒有問題了。計算優化後面再介紹。

那麼豎直和水平的混搭要如何做？

親肯定會說，旋轉即可。是的 ，原理就這麼簡單！但是坑在於，旋轉是相對於原點旋轉的，那麼生成的文字必須一開始是圍繞中心點，而後平移到畫布中間，

這時候的.getImageData(x,y,width,height)會如何變化呢，下節介紹。。。