文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 15:23

关注

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

[[357379]]

二、项目准备

软件:Dreamweaver

三、实现的目标

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

四、项目实现

1. 创建canvas画布

  1.  
  2.     'canvas'
  3.  

2. 添加css样式。

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

  1. "text/css"
  2.     canvas{ 
  3.         border:2px solid #f00; 
  4.  

3.添加js样式

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

  1. "text/javascript"
  2.      var _canvas=document.getElementById("canvas"
  3.     _canvas.width=500; 
  4.     _canvas.height=500; 
  5. var r,g ,b,a; 
  6.  

3.2 产生随机圆。

  1. for (var j = 0; j < 150; j++) { 
  2.         arc.x=Math.floor(Math.random()*_canvas.width); 
  3.         arc.y=Math.floor(Math.random()*_canvas.height); 
  4.         arc.r=Math.floor(Math.random()*31+10); 
  5.         r=Math.ceil(Math.random()*256); 
  6.         g=Math.ceil(Math.random()*256); 
  7.         b=Math.ceil(Math.random()*256); 
  8.         a=Math.random(); 
  9.  
  10.         darw(); 

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

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

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

  1.  
  2. for (var i = 0; i < 5; i++) { 
  3.  
  4.         _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); 
  5.  
  6.          _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); 
  7.       

3.4 随机产生颜色。

Math函数随机产生0-225的RGB值。

  1.   
  2.     _ctx.fillStyle="rgba(" + r + "," + g + "," + b + "," + a + ")";  
  3.     _ctx.fill(); 
  4.         _ctx.strokeStyle="rgba(" + r + "," + g + "," + b + "," + a + ")"
  5.       _ctx.stroke(); 
  6.       } 

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

  1. darw(); 

五、效果展示

1、点击f12运行到浏览器

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

六、总结

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

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

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

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

 

来源: IT共享之家内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯