当月亮上升到距离顶部,同时显示starUnder130像素时，清除定时器，月亮上升停止！
当月亮停止之后，让里面的诗句逐字（定时器实现）显示，通过设置的动画让嫦娥图片显示！
class="stars"是创建夜空中的星星，并加上css动画让其动起来！
div id=“water” 是底部倒影
<!doctype html><html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<style type="text/css">
html{
height: 100%
}
html,body,ul,li,canvas{
margin: 0
padding: 0
}
</style>
</head>
<body bgcolor="#000000">
<canvas id="knife"></canvas>
</body>
<script>
var canvas = document.getElementById("knife")
canvas.style.position = "absolute"
canvas.style.top = 0
var w = window.innerWidth
var h = window.innerHeight
canvas.width = w
canvas.height = h
var cxt = canvas.getContext("2d")
cxt.strokeStyle = "#FFF"
var list = []
var G = 0.4 //向心加速度
var SPEED_Y = -1 //向上速度
var centerLine = w/2 //龙卷风中线
function addLine(){
var LEN = 2
for(var i = 0 i <LEN i ++){
list.push({
x:w/2,
y:h/1.3,
g:G,
c:centerLine+2*Math.random(),
sx:(Math.random()-0.5)*4,
sy:SPEED_Y+0.5*(Math.random()-0.5),
len:Math.round(Math.random()*10+5),
list:[{x:w/2,y:h/1.3}]
})
}
}
function step(){
cxt.clearRect(0,0,w,h)
addLine()
var obj
for(var i = 0 i <list.lengthi ++){
obj = list[i]
if(obj.y <h/2.5){//如果超过这个高度，就删除一个点
obj.len --
if(obj.len == 0){
list.splice(i,1)
i --
continue
}
}
obj.x += obj.sx
obj.y += obj.sy
obj.sx += obj.g
obj.g = obj.x >obj.c ? -G : G
obj.list.unshift({x:obj.x,y:obj.y})//记录下质点运动轨迹
obj.list = obj.list.slice(0,obj.len)//仅仅画出其中一段线就好
//画出所有点的连线
cxt.beginPath()
cxt.moveTo(obj.list[0].x,obj.list[0].y)
for(var j = 1 j <obj.list.lengthj ++){
cxt.lineTo(obj.list[j].x,obj.list[j].y)
}
cxt.stroke()
}
requestAnimationFrame(step)
}
requestAnimationFrame(step)
</script>
</html>
