您现在的位置是:首页 > Javascript
当前栏目
手把手教你用Javascript制作随机星星效果图
2023-03-14 09:38:43 时间
一、前言
在浏览一些图片网站的时候,经常会看到很多的漂亮的星空图,比如,下面的图片。其实这种星星图片的效果,也可以通过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>
canvas{
border:2px solid #f00;
}
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产生星星效果时,遇到的一些难点进行了分析及提供解决方案。
欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
代码很简单,希望对你有所启发。
本文转载自微信公众号「 IT共享之家 」,可以通过以下二维码关注。转载本文请联系 IT共享之家 公众号。
相关文章
- 这几款基于Vue3和Vite的开箱即用的中后台管理模版,让你yyds!
- 我的 CSS 就是这么可爱——如何组织 CSS
- 被尤雨溪diss的Native CSS Modules是什么
- 这一把子彻底搞懂 setState 原理
- ActiveData在HarmonyOS中的原理分析和运用
- 乒乒乓乓:这点小事儿,算什么?
- Vue非Node和Vuecli环境开发网站项目-支持动态路由
- 码农属于新生代农民工上热搜 网友:官宣了 没毛病
- 从前序及中序与后序遍历序列构造二叉树登场!
- 令人眼前一亮的 Vue 实战技巧
- Void在JS和TS中的区别
- 7月份Github上JavaScript开源项目排行
- 一篇文章带你搞懂JavaScript 微任务(Microtask)
- 提供可制定化的路由加载方式,Vue 如何做到?
- 聊聊Kubernetes Without Kube-Proxy
- Springboot 中InputStream 神秘消失之谜
- Springboot整合Kafka Stream实时统计数据
- 五分钟带你体验一把分布式事务!so easy!
- 基于JS卡片开发的代码示例工程JsFACard与StepsCard的解析
- 什么?HashMap竟然也有懒加载?