用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结构
完成以上绚丽的星图效果关键在于一下三点。