准备工作
获取canvas元素节点获取画布工具获取节点的宽高挂载图像var girlPic = new Image(), starPic = new Image()girlPic.src = 'src/girl.jpg’ starPic.src = 'src/star.png'创建方法gameloop //刷新canvas画布,循环做绘制背景,每隔一段时间来刷新canvas的内容window.requestAnimFrame(gameloop) 实现持续动画效果
制作背景
对画布对象使用方法fillStyle, fillRect方法挂载至函数gameloop
女孩图片挂载
创建Image对象 传递src路径使用方法drawImage 挂载Image对象 x位置 y位置 宽 高方法挂载至函数gameloop
制作很多星星
定义一个类并添加属性 x，y位置并使用Math.random使其位置随机使用循环创建很多类并初始化使用子类prototype向对象添加方法draw将图片挂载至对象上使用drawImage方法ctx.drawImage(starPic创建方法drawStars遍历每一个对象并使用添加的方法再添加到gameloop中
序列帧动画
使用Date.now返回的毫秒数 获取俩次回返的差值初始化随机播放帧数和累计变量序列帧图片每一帧为7累计到变量上超过50，计算下一帧，并超过7那么回到第一帧，然后重新累计变量ctx.drawImage(starPic, this.picNo * 7, 0, 7, 7, this.x, this.y, 7, 7)图像，图像上的x,y，截取图像大小，在画布上的坐标，在画布上的缩放大小
随机位移
创建x, y属性并随机一个速度this.x = 初始化速度 1.5至-1.5 * 差距时间 * 0.02
重生判断
判断x超过屏幕外那么重新初始化此类init() 并return 结束这个类
监听鼠标
document.addEventListener("mousemove", mousemove, false)获取鼠标当前位置，当在图片中时变量为false监听变量 当为true创建另一个变量逐渐变为1最大为1，否则逐渐变小，最小为0使用画布工具的globalAlpha控制星星的透明度,使用工具的save(), restore()方法使这个透明度只作用与星星
