用canvas实现星图

最新推荐文章于 2022-09-16 13:57:39 发布

qq_39401434

最新推荐文章于 2022-09-16 13:57:39 发布

阅读量1.2k

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_39401434/article/details/74516408

版权

用canvas实现星图

友情提示：本文需要你有一定的前端知识以及要对canvas绘图有一定的了解。前端知识可以在w3cschool,菜鸟教程或者慕课网上学习，canvas推荐慕课网教程（慕课网搜索canvas，选择“炫丽的倒计时效果Canvas绘图与动画基础”和“Canvas绘图详解”）。本人也是只看了这些教程做出的星图，对于一些高端的技巧还不了解，请大佬们见谅。好了，让我们开始把！

1.最终效果

首先，先让我们看一下最终的效果图来体验一下。
https://www.jiguang.cn/（请点击这个链接）
本人是仿照极光的官网做的星图。

2.html页面与js结构

html页面

<html>
<head>
    <meta name="" http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>极光特效</title>
    <style type="text/css">
        * {
            margin: 0;
        }

        #canvas {
            height: 100%;
            background-image: url(./pic2.jpg);
        }
    </style>
</head>
<body style="height:100%">
    <canvas id="canvas"></canvas>
    <script src="TWeenLite.min.js"></script>
    <script src="CSSPlugin.min.js"></script>
    <script src="EasePack.min.js"></script>
    <script src="jg.js"></script>
</body>
</html>

在这里TWeenLite.min.js，CSSPlugin.min.js，EasePack.min.js是星图中使用到的一个框架，在此请先忽略，我在后面再说。jg.js是本文使用到的javascript脚本文件。

js结构

完成以上绚丽的星图效果关键在于一下三点。

最低0.47元/天解锁文章

qq_39401434

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
用canvas实现星图

本文需要你有一定的前端知识以及要对canvas绘图有一定的了解。前端知识可以在w3cschool,菜鸟教程或者慕课网上学习，canvas推荐慕课网教程（慕课网搜索canvas，选择“炫丽的倒计时效果Canvas绘图与动画基础”和“Canvas绘图详解”）。本人也是只看了这些教程做出的星图，对于一些高端的技巧还不了解，请大佬们见谅。
复制链接

扫一扫