一、前言

在瀏覽一些圖片網站的時候，經常會看到很多的漂亮的星空圖，比如，下面的圖片。其實這種星星圖片的效果，也可以通過html＋css樣式和js的方式來實現。今天教大家如何實現星星圖的效果。

二、項目準備

軟件：Dreamweaver

三、實現的目標

每次刷新產生隨機的星星個數。顯示畫布上。

四、項目實現

1． 創建canvas畫布＜body＞ ＜canvas id＝＇canvas＇＞＜／canvas＞＜／body＞2． 添加css樣式。

給canva 畫布加上邊框，方便觀察。

＜style type＝＂text／css＂＞ canvas｛ border：2px solid ＃f00；｝＜／style＞3．添加js樣式
3．1 設置canvas畫布大小 ，定義需要變量。＜script type＝＂text／javascript＂＞ var ＿canvas＝document．getElementById（＂canvas＂） ＿canvas．width＝500； ＿canvas．height＝500；var r，g ，b，a；＜／script＞3．2 產生隨機圓。
for （var j ＝ 0； j ＜ 150； j＋＋） ｛ arc．x＝Math．floor（Math．random（）＊＿canvas．width）； arc．y＝Math．floor（Math．random（）＊＿canvas．height）； arc．r＝Math．floor（Math．random（）＊31＋10）； r＝Math．ceil（Math．random（）＊256）； g＝Math．ceil（Math．random（）＊256）； b＝Math．ceil（Math．random（）＊256）； a＝Math．random（）；
darw（）；｝3．3 定義draw（）方法，通過畫星星公式，將圓形轉換成星星狀 for 循環產生隨機位置星星。

如何畫星星？（公式解析）（圖片來源百度）

星星有內切圓和外切圓，每兩個點之間的角度是固定的，因此可得到星星的每個點的坐標，畫出星星。

隨機產生星星for （var i ＝ 0； i ＜ 5； i＋＋） ｛
＿ctx．lineTo（Math．cos（（18＋72＊i）／180＊Math．PI）＊arc．r＋arc．x， －Math．sin（（18＋72＊i）／180＊Math．PI）＊arc．r＋arc．y）；
＿ctx．lineTo（Math．cos（（54＋72＊i）／180＊Math．PI）＊arc．r／2＋arc．x， －Math．sin（（54＋72＊i）／180＊Math．PI）＊arc．r／2＋arc．y）； ｝3．4 隨機產生顏色。

Math函數隨機產生0－225的RGB值。

隨機顏色 ＿ctx．fillStyle＝＂rgba（＂ ＋ r ＋ ＂，＂ ＋ g ＋ ＂，＂ ＋ b ＋ ＂，＂ ＋ a ＋ ＂）＂； ＿ctx．fill（）； ＿ctx．strokeStyle＝＂rgba（＂ ＋ r ＋ ＂，＂ ＋ g ＋ ＂，＂ ＋ b ＋ ＂，＂ ＋ a ＋ ＂）＂； ＿ctx．stroke（）； ｝3．5． 調用draw（）方法實現功能。
darw（）；