html，canvas——星星闪烁

最新推荐文章于 2023-03-09 11:08:50 发布

小五子了

最新推荐文章于 2023-03-09 11:08:50 发布

阅读量3.1k

点赞数 1

分类专栏：菜鸟开始走文章标签： canvas html 鼠标 api 图片

本文链接：https://blog.csdn.net/bang3/article/details/78554483

版权

菜鸟开始走专栏收录该内容

15 篇文章 0 订阅

订阅专栏

学习慕课网笔记。点击

知识点：
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);
}

小五子了

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html，canvas——星星闪烁

学习慕课网笔记。点击知识点： 1.如何轮播序列帧 2.canvas API –drawImage（） –globalAlpha –save –restore 3.如何添加鼠标事件星星效果： * 1.很多星星 * 2.序列帧动画 * 3.随机位移 * 4.重生判断当星星跑出图片范围就消失，并保证总体星星数量不变，所以重生在图片的某个位置步骤： 1.在画布
复制链接

扫一扫