如何通過html＋css樣式和js的方式實現(xiàn)星星圖的效果

一、前言

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

二、項目準備

軟件：Dreamweaver

三、實現(xiàn)的目標

每次刷新產(chǎn)生隨機的星星個數(shù)。顯示畫布上。

四、項目實現(xiàn)

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

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

＜style type＝＂text／css＂＞ canvas｛ border：2px solid ＃f00；｝＜／style＞3．添加js樣式
3．1 設(shè)置canvas畫布大小 ，定義需要變量。＜script type＝＂text／javascript＂＞ var ＿canvas＝document．getElementById（＂canvas＂） ＿canvas．width＝500； ＿canvas．height＝500；var r，g ，b，a；＜／script＞3．2 產(chǎn)生隨機圓。
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（）方法，通過畫星星公式，將圓形轉(zhuǎn)換成星星狀 for 循環(huán)產(chǎn)生隨機位置星星。

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

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

隨機產(chǎn)生星星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 隨機產(chǎn)生顏色。

Math函數(shù)隨機產(chǎn)生0－225的RGB值。

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