<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="createjs.min.js"></script>
<script type="text/javascript" src="star.js"></script>
<script type="text/javascript" src="moon.js"></script>
<script type="text/javascript" src="meteor.js"></script>
<script type="text/javascript" src="snow.js"></script>
</head>
<style>
html,body{
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<body style="background-color: #000000;">
<canvas id="stage" width="800" height="800"></canvas>
<script type="text/javascript">
createjs.Ticker.timingMode = createjs.Ticker.RAF;
var stage = new createjs.Stage("stage");
document.getElementById('stage').width = document.getElementsByTagName('body')[0].clientWidth;
document.getElementById('stage').height = document.getElementsByTagName('body')[0].clientHeight;
var starArr = [];
var starSides = [4,5,6];
for(var i=0;i<30;i++){
var s = new star({container : stage, speed : i%2?2:-2,pointSize:0.95,sides : starSides[i%3]});
createjs.Tween.get(s.shape,{ loop : true}).wait((i+1)*1500)
.to({alpha : 0},1000)
.wait(500)
.to({alpha : 1},1000);
starArr.push(s);
}
var m = new moon({
container : stage
});
var meteorArr = [];
for(var i=0;i<20;i++){
var me = new meteor({
container : stage,
y : Math.random()*400,
x : Math.random()*800,
speed : parseInt(Math.random()*5)+1
});
meteorArr.push(me);
}
var n = new snow({
container : stage,
speed : 10
});
createjs.Ticker.addEventListener("tick",function (){
for(var i=0;i<starArr.length;i++){
starArr[i].play();
}
for(var i=0;i<meteorArr.length;i++){
meteorArr[i].play();
}
n.drawSnow();
stage.update();
})
setInterval(function(){
var me = new meteor({
container : stage,
y : Math.random()*400,
x : Math.random()*800,
speed : parseInt(Math.random()*5)+1
});
meteorArr.push(me);
},100);
</script>
</body>
</html>
canvas createjs实现美丽夜空，流星，月亮，闪烁星星，飘落雪花
需积分: 50 10 浏览量
2017-09-02
21:26:20
上传
评论 2
收藏 50KB RAR 举报
demo.rar （9个子文件） 
star.js 1KB
star.html 2KB meteor.js 930B moon.html 751B snow.js 1KB meteor.html 925B moon.js 1019B snow.html 869B createjs.min.js 186KB资源评论
