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

一、前言

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

二、項(xiàng)目準(zhǔn)備

軟件：Dreamweaver

三、實(shí)現(xiàn)的目標(biāo)

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

四、項(xiàng)目實(shí)現(xiàn)

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

給canva 畫(huà)布加上邊框，方便觀察。

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

如何畫(huà)星星？（公式解析）（圖片來(lái)源百度）

星星有內(nèi)切圓和外切圓，每?jī)蓚€(gè)點(diǎn)之間的角度是固定的，因此可得到星星的每個(gè)點(diǎn)的坐標(biāo)，畫(huà)出星星。

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

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

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