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

、前言

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

五、效果展示

1、点击f12运行到浏览器

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

六、总结

本项目利用canvas画布，实现星星图的效果，以及在运用javascript产生星星效果时，遇到的一些难点进行了分析及提供解决方案。
欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。
代码很简单，希望对你有所启发。

想学习更多前端、Python爬虫、大数据等计算机知识，请前往：http://pdcfighting.com/

们可以运用canvas在浏览器中绘制出各种漂亮的图形，仅需要确定图形的各个坐标点即可完成我们所需要的任务。如果我们要想画出精确的图案，就需要精确的计算出每个坐标点。下面给出了画五角星的基本方法（仅供参考），只要掌握了步骤，准确计算出坐标点，就可以绘制出比下面的这个图好看，那就先看看步骤和代码是怎样实现的吧。

一、Canvas绘制五角星的步骤

 <!--<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>绘制五角星</title> 
</head>
<body>
<canvas id="demo">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var canvas = document.getElementById("demo");
canvas.width = 500;
canvas.height = 500;
canvas.style.border = "1px solid pink";
var ctx = canvas.getContext("2d");
// 找到起始点
ctx.moveTo(0, 150);
// 到达结束点
ctx.lineTo(500, 150);
ctx.lineTo(0,500);
ctx.lineTo(250,0);
ctx.lineTo(500,500);
// ctx.lineTo(0, 100);
// 闭合线段
ctx.closePath();
// 设置线段描边的颜色
ctx.strokeStyle = "red";
// 设置描边的宽度
ctx.lineWidth = 2;
// 将线段描边
ctx.stroke();
// 设置填充的属性值
ctx.fillStyle = "yellow";
// 设置填充的颜色
ctx.fill();
</script>
</body>
</html>-->

二、Canvas绘制出的五角星图形

言

随着HTML5的火热，越来越多的人投入到HTML5开发中了，canvas作为HTML5中比较重要的一个元素，在很多官网的主页面中被使用到。今天我们一起来看看如何使用canvas画出一个梦幻的星空背景，还会有流星运动。

本文的代码已经放到Github上了，感兴趣的可以自取，Github地址如下。

https://github.com/zhouxiongking/article-pages/blob/master/articles/starry/starry.html

HTML5

实现效果

首先我们来看看通过canvas实现的星空效果图，如下所示。

效果图

代码实现

接下来我们看看这个效果是如何通过代码一步步实现的。

首先来看看页面上的HTML代码，只有一个Div元素。

HTML代码

Javascript代码

首先我们需要定义一些常量，比如画布的宽和高，星星数量，流星个数。在这个星空中流星其实是星星的一个，只是添加了动态效果。

页面初始化

然后是设定一个定时器，通过一段随机时间生成一个流星的索引号。

流星索引号

紧接着来看看生成一个星星的方法，该方法返回一个星星的各项参数，包括x,y轴坐标，透明度，x,y轴偏移量。

生成星星的参数

然后是最重要的render方法，通过该方法可以将星星渲染至画布上，我们将这个方法拆开看，首先是对流星的绘制，流星索引号通过上面metor方法获得。

画流星

然后是对于星星各项参数的处理，比如有的星星生成的点坐标超出了屏幕宽高，有的透明度是负数，都要将其处理成正常参数。

各项参数判断

最后是在画布中进行绘制。

画布绘制

至此，这个画面效果的讲解完毕，如果代码正确的话，就可以看到文中出现的效果图。

结束语

今天这篇文章主要是借助HTML5中的canvas画出了一个梦幻星空的效果，你学会了吗？

在线咨询

上一篇：介绍html中的拖放效果如何实现
下一篇：Web前端培训：缩短Web开发时间的技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商