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