怎么用Javascript制作随机星星效果图

这篇文章主要讲解了“怎么用Javascript制作随机星星效果图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用Javascript制作随机星星效果图”吧！

创新互联成立于2013年，我们提供高端网站建设公司、重庆网站制作、成都网站设计、网站定制、营销型网站、成都小程序开发、微信公众号开发、成都网站营销服务，提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地，为成都展览展示企业提供源源不断的流量和订单咨询。

一、前言

在浏览一些图片网站的时候，经常会看到很多的漂亮的星空图，比如，下面的图片。其实这种星星图片的效果，也可以通过html+css样式和js的方式来实现。今天教大家如何实现星星图的效果。

二、项目准备

软件：Dreamweaver

三、实现的目标

每次刷新产生随机的星星个数。显示画布上。

四、项目实现

1. 创建canvas画布

2. 添加css样式。

给canva 画布加上边框，方便观察。

     canvas{         border:2px solid #f00; }

3.添加js样式

3.1 设置canvas画布大小，定义需要变量。

      var _canvas=document.getElementById("canvas")     _canvas.width=500;     _canvas.height=500; var r,g ,b,a;

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 循环产生随机位置星星。

如何画星星?(公式解析)(图片来源百度)

怎么用Javascript制作随机星星效果图

星星有内切圆和外切圆，每两个点之间的角度是固定的，因此可得到星星的每个点的坐标，画出星星。

怎么用Javascript制作随机星星效果图

/* 随机产生星星*/ 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()方法实现功能。