添加链接 注册    登录
link之家
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
朝气蓬勃的领结  ·  3D动漫同人《斗破苍穹》《完美世界》VAM_ ...·  1 年前    · 
坚韧的凉面  ·  hongkong doll不戴口罩 - ...·  2 年前    · 
另类的砖头  ·  全攻略 | ...·  2 年前    · 
腼腆的水桶  ·  谁可以这样爱我(2022年D·J·卡卢索执导 ...·  2 年前    · 
捣蛋的硬盘  ·  欧拉芭蕾猫2023款、报价图片、配置参数、试 ...·  2 年前    · 
link之家  ›  手把手教你用Javascript制作随机星星效果图
javascript canvas canvas元素
https://cloud.tencent.com/developer/article/1764047
坚强的拖把
2 年前
备案 控制台
学习
实践
活动
专区
工具
TVP
文章/答案/技术大牛
写文章
专栏首页 前端进阶学习交流 手把手教你用Javascript制作随机星星效果图
1 0

海报分享

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

发布于2020-12-22 15:14:16 阅读 412 0
本文被 1 个清单收录，推荐清单
前端进阶学习交流

一、前言

在浏览一些图片网站的时候，经常会看到很多的漂亮的星空图，比如，下面的图片。其实这种星星图片的效果，也可以通过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、每次刷新网页，随机产生不一样的星星和随机颜色。

六、总结

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

------------------- End -------------------

文章分享自微信公众号：
IT共享之家

本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！

作者： IT共享者
原始发表时间： 2020-12-14
如有侵权，请联系 cloudcommunity@tencent.com 删除。
展开阅读全文
举报

 
推荐文章
朝气蓬勃的领结  ·  3D动漫同人《斗破苍穹》《完美世界》VAM_哔哩哔哩_bilibili
1 年前
坚韧的凉面  ·  hongkong doll不戴口罩 - 搜狗图片搜索
2 年前
另类的砖头  ·  全攻略 | 亲子滑雪玩雪装备，不花冤枉钱，正确开启滑雪初体验 - 知乎
2 年前
腼腆的水桶  ·  谁可以这样爱我(2022年D·J·卡卢索执导的电影)_搜狗百科
2 年前
捣蛋的硬盘  ·  欧拉芭蕾猫2023款、报价图片、配置参数、试驾 - 欧拉官网
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
link之家 - 链接快照平台
© 2024 ~ 沪ICP备11025650号