canvas实现星星闪烁特效

准备工作

获取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，截取图像大小，在画布上的坐标，在画布上的缩放大小