一、前言

在瀏覽一些圖片網站的時候，經常會看到很多的漂亮的星空圖，比如，下面的圖片。其實這種星星圖片的效果，也可以通過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()；

總結

以上是生活随笔為你收集整理的html 画星星的坐标,如何通过html＋css样式和js的方式实现星星图的效果？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。