学习慕课网笔记。点击
知识点:
1.如何轮播序列帧
2.canvas API
–drawImage()
–globalAlpha
–save
–restore
3.如何添加鼠标事件
星星效果:
* 1.很多星星
* 2.序列帧动画
* 3.随机位移
* 4.重生判断 当星星跑出图片范围就消失,并保证总体星星数量不变,所以重生在图片的某个位置
步骤:
1.在画布图片上先画一个星星
2.画n个星星:
定义一个类 var obj=function(){}
3.让序列帧动起来:
canvas API的使用。
4.鼠标与星星互动:
使用mouse的监听事件event
window API:
* 1.requestAnimFrame(function(){});可以依据你电脑性能来确定循环时间
* 2.setTimeout(function(){},time); 计时器
* 3.setIntervar(function(){},time);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>stargirl</title>
</head>
<body>
<div>
<canvas id="canvas" width="800" height="600"></canvas>
</div>
</body>
<script type="text/javascript" src="js/stars.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
</html>
//获取canvas 和使用API
var can;
var ctx;
var w;
var h;
var girlPic=new Image();//女孩图片
var starPic=new Image();//星星
var num=60;//星星数量60个
var stars=[];
var lastTime;//存储上一次刷新星星的时间
var deltaTime;//存储当前帧刷新的时间与上一帧刷新的时间之间间隔,也就是两帧之间间隔
var switchy=false;//记录鼠标是否在图片范围内,在为true,不在为false
var life=0;//星星透明度变量
/*循环调用gameloop()刷新画布的方法
* 1.requestAnimFrame(function(){});可以依据你电脑性能来确定循环时间
* 2.setTimeout(function(){},time);
* 3.setIntervar(function(){},time);
*/
function init(){
//获取canvas DOM元素
can=document.getElementById("canvas");
//获取canvas绘制环境,画布工具
ctx=can.getContext("2d");
//获取宽高
w=can.width;
h=can.height;
// console.log(w);
//鼠标事件
document.addEventListener("mousemove",mousemove,false);
//初始化加载女孩图片,星星图片
girlPic.src="img/girl.jpg";
starPic.src="img/star.png";
for(var i=0;i<num;i++){
var obj=new starObj();
stars.push(obj);
stars[i].init();//初始化
}
//在gameloop更新之前获取时间
lastTime=Date.now();//获取当前时间,即上一帧刷新的时间
gameloop();
}
//html页面加载完成执行init()
document.body.onload=init();
//刷新canvas画布
function gameloop(){
window.requestAnimationFrame(gameloop);
var now=Date.now();//当前时间
deltaTime=now-lastTime;//当前时间-上一次刷新时间=两帧之间间隔
lastTime=now;
// console.log(deltaTime);
drawBground();
drawGirl();
// drawStar();
drawStars();
aliveUpdate();
}
//绘制背景
function drawBground(){
//填充样式,背景颜色
ctx.fillStyle="#393550";
//填充位置,从0 0 到整个canvas的宽和高
ctx.fillRect(0,0,w,h);
}
//绘制女孩
function drawGirl(){
//drawImage(img,x,y,width,height)图片,canvas中坐标系的x,y的值,图片高度,宽度
//x轴坐标正方向向右,y轴坐标正方形向下,(0,0)在canvas左上角
ctx.drawImage(girlPic,100,150,600,300);
}
//鼠标移动事件
function mousemove(e){
//如果鼠标位置发生了变化
if(e.offsetX||e.layerX){
//如果监测到offsetX就赋给px,如果没有检测到,检测到layerX也赋给px
var px=e.offsetX==undefined?e.layerX:e.offsetX;
var py=e.offsetY==undefined?e.layerY:e.offsetY;
// console.log(px);
//px在范围内&&py在范围内
if(px>100&&px<700&&py>150&&py<450){
switchy=true;
}
else{
switchy=false;
}
// console.log(switchy);
}
}
/*
* 分析星星效果:
* 1.很多星星
* 2.序列帧动画
* 3.随机位移
* 4.重生判断 当星星跑出图片范围就消失,并保证总体星星数量不变,所以重生在图片的某个位置
*/
//创建一个类starObj
var starObj=function(){
this.x;
this.y;
this.picNum;//定义序列帧动画
this.timer;//让picNum每一次变化时间间隔一样
//星星x,y轴速度
this.xSpd;
this.ySpd;
}
starObj.prototype.init=function(){
this.x=Math.random()*600+100;
this.y=Math.random()*300+150;//初始化获得坐标值
//Math.floor(x)返回小于参数x的最大整数,即对浮点数向下取整
this.picNum=Math.floor(Math.random()*7);
this.timer=0;
this.xSpd=Math.random()*3-1.5;//初始化随机速度值
this.ySpd=Math.random()*3-1.5;//速度范围,[-1.5,1.5)任意方向
}
//动画更新
starObj.prototype.update=function(){
this.x +=this.xSpd*deltaTime*0.004;
this.y +=this.ySpd*deltaTime*0.004;
//重生判断
//this.x this.y 超过范围 init
if(this.x<107||this.x>700){
this.init();
return;
}
if(this.y<150||this.y>450){
this.init();
return;
}
this.timer +=deltaTime;
if(this.timer>50){
this.picNum +=1;
this.picNum %=7;
this.timer=0;
}
// this.picNum += 1;//星星每一帧加一
// if(this.picNum>=7){
// this.picNum=0;
// }
}
starObj.prototype.draw=function(){
//使用canvas API让星星显示还是隐藏
//globaAlpha 全局透明度 会让全部透明度变成相同的透明度,包括canvas
//要让星星单独显示或隐藏就要使用另外两个API save() restore() 这两个通常成对出现
//可以控制在save和restore之间所以的属性都只作用于这一块,而外面的内容都不起作用
//save()
//globaAlpha
//restore()
ctx.save();
ctx.globalAlpha=life;
//drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
//图片,sx,sy图片上的起点坐标,swidth,sheight图片序列帧上要截取的宽和高
//x,y在canvas上的坐标,width,height图片在cancas上的宽和高
//starPic这张图片尺寸:49*7 所以一共有7帧,每一帧是7*7个像素
ctx.drawImage(starPic,this.picNum * 7,0,7,7,this.x,this.y,7,7);
// ctx.drawImage(starPic,this.x,this.y);
ctx.restore();
}
//绘制一个星星
//function drawStar(){
// ctx.drawImage(starPic,300,400);
//}
//绘制60个星星
function drawStars(){
for(var i=0;i<num;i++){
stars[i].update();
stars[i].draw();
}
}
function aliveUpdate(){
if(switchy){
//show stars
life+=0.03*deltaTime*0.05;//渐变
if(life>1){
life=1;
}
}
else{
//hide stars
life-=0.03*deltaTime*0.05;
if(life<0){
life=0;
}
}
// console.log(switchy);
}