手把手教你用Javascript制作随机星星效果图

一、前言

公司主营业务：网站建设、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出小店免费做网站回馈大家。

在浏览一些图片网站的时候，经常会看到很多的漂亮的星空图，比如，下面的图片。其实这种星星图片的效果，也可以通过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 循环产生随机位置星星。

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

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

 
 
 
   
  
  
  /* 随机产生星星*/   
  
  
  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();

五、效果展示

1、点击f12运行到浏览器

2、每次刷新网页，随机产生不一样的星星和随机颜色。

六、总结

本项目利用canvas画布，实现星星图的效果，以及在运用javascript产生星星效果时，遇到的一些难点进行了分析及提供解决方案。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

代码很简单，希望对你有所启发。

本文转载自微信公众号「 IT共享之家」，可以通过以下二维码关注。转载本文请联系 IT共享之家公众号。

网站名称：手把手教你用Javascript制作随机星星效果图
文章分享：http://www.mswzjz.com/qtweb/news22/184422.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容