一、前言
在浏览一些图片网站的时候，经常会看到很多的漂亮的星空图，比如，下面的图片。其实这种星星图片的效果，也可以通过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()；
