当前位置：网站首页 > 技术文章 > 正文

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

myzbx 2025-01-11 15:35 56 浏览

一、前言

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

HTML 画布

上一篇：OpenAI宣布正式推出Canvas:用于写作和编码
下一篇：用html5的canvas和JavaScript创建一个绘图程序

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

二、项目准备

三、实现的目标

四、项目实现

1. 创建canvas画布

2. 添加css样式。

3.添加js样式

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

3.2 产生随机圆。

3.3 定义draw()方法，通过画星星公式，将圆形转换成星星状 for 循环产生随机位置星星。

3.4 随机产生颜色。

3.5. 调用draw()方法实现功能。

五、效果展示

六、总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿

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

二、项目准备

三、实现的目标

四、项目实现

1. 创建canvas画布

2. 添加css样式。

3.添加js样式

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

3.2 产生随机圆。

3.3 定义draw()方法，通过画星星公式，将圆形转换成星星状 for 循环产生随机位置星星。

3.4 随机产生颜色。

3.5. 调用draw()方法实现功能。

五、效果展示

六、总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

用上Vue3，你真的变了吗?（vue3 key）

说下你的vue项目的目录结构，该怎么划分?

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿

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