canvas实现星星特效

最新推荐文章于 2024-06-28 16:03:48 发布

sd訫訴sd

最新推荐文章于 2024-06-28 16:03:48 发布

阅读量1.5k

点赞数 1

分类专栏： web 文章标签： canvas html

本文链接：https://blog.csdn.net/qq_35864862/article/details/79605703

版权

web 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果描述：

当鼠标移动到图片上方时，图片上放会出现星星，并且星星随即运动；当鼠标移开图像时，星星渐渐消失。
效果图如下：

主要实现代码
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div>
        <canvas id="canvas" width="800" height="600"></canvas>
    </div>

    <script type="text/javascript" src="js/commonFunctions.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/stars.js"></script>

</body>
</html>

main.js

var can;
var ctx;
var w;
var h;
// 女孩的图片
var girlPic = new Image();
// 星星图片
var starPic = new Image();
// 上次刷新时间
var lastTime;
//刷新时间间隔
var deltaTime;
var life = 1;
var num = 60;
var stars = [];
var switchy;
function init(){
    can = document.getElementById("canvas");
    ctx = can.getContext("2d");
    w=can.width;
    h=can.height;
    document.addEventListener("mousemove",mousemove,false); 

    // 加载图片
    girlPic.src = "src/girl.jpg";
    starPic.src="src/star.png";

    for (var i = 0; i < num; i++) {
        var obj = new starObj();
        stars.push(obj);
        stars[i].init();
    }
    lastTime = Date.now();
    gameloop();
}
document.body.onload = init;

function drawBackground(){
    ctx.fillstyle = "#393550";
    ctx.fillRect(0,0,w,h);
}
function gameloop(){
    // 循环调用函数,时间不确定
    window.requestAnimFrame(gameloop);
    var now = Date.now();
    deltaTime = now - lastTime;
    lastTime = now;
    // console.log(deltaTime);
    drawBackground();
    drawGirl();
    drawStars();
    aliveUpdate();
}

function drawGirl(){
    ctx.drawImage(girlPic,100,150,600,400);
}
function mousemove(e){
    if (e.offsetX || e.layerX) {
        var px = e.offsetX == undefined ? e.layerX :e.offsetX;
        var py = e.offsetY == undefined ? e.layerY :e.offsetY;
        // console.log(px);

        if (px >100 && px <700 && py >150 && py < 450) {
            switchy = true;
        }else{
            switchy = false;
        }
        // console.log(switchy);

    }
}

stars.js


// 星星类
var starObj = function(){
    this.x ;
    this.y ;
    this.picNo;
    this.timer;
    this.xSpeed;
    this.ySpeed;
}
// 初始化方法
starObj.prototype.init = function(){
    this.x=100 + Math.random()*600;
    this.y=150 + Math.random()*300;
    this.xSpeed = Math.random()*3-1.5;
    this.ySpeed = Math.random()*3-1.5;

    this.picNo = Math.floor(Math.random()*7);
    this.timer=0;
}
starObj.prototype.update = function(){
    this.timer += deltaTime;
    this.x += this.xSpeed * 0.06 * deltaTime;
    this.y += this.ySpeed * 0.06 * deltaTime;

    if (this.x <100 || this.x >700) {
        this.init();
        return;
    }
    if (this.y <150 || this.y >450) {
        this.init();
        return;
    }
    if (this.timer > 50) {
        this.picNo += 1;
        this.picNo %= 7;
        this.timer = 0;
    } 

}
starObj.prototype.draw = function(){
    ctx.save();
    ctx.globalAlpha = life;
    ctx.drawImage(starPic,7*this.picNo,0,7,7,this.x,this.y,7,7);
    ctx.restore();
}
function drawStars(){
    for (var i = 0; i < num; i++) {
        stars[i].draw();
        stars[i].update();
    }
}
function aliveUpdate(){
    if (switchy) {
        life += 0.03*deltaTime*0.05;
        if (life>1) {
            life = 1;
        }
    }else{
        life -= 0.03*deltaTime*0.05;
        if (life<0) {
            life = 0;
        }
    }
}

commonFunctions.js

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
            return window.setTimeout(callback, 1000 / 60);
        };
})();