鼠标烟雾拖尾（含代码）

最新推荐文章于 2023-07-31 09:14:29 发布

long_songs

最新推荐文章于 2023-07-31 09:14:29 发布

阅读量637

点赞数 1

分类专栏： HTML 基础平台开发笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/long_songs/article/details/129107917

版权

笔记同时被 3 个专栏收录

57 篇文章 3 订阅

订阅专栏

HTML

20 篇文章 2 订阅

订阅专栏

基础平台开发

11 篇文章 0 订阅

订阅专栏

鼠标拖尾是一种计算机图形学技术，用于模拟物体在空间中的运动。它通过在物体的轨迹上放置一系列点来实现，这些点可以用来模拟物体的运动，从而使物体看起来更加真实。鼠标拖尾可以用于模拟物体的运动，例如火焰、水流、烟雾等，也可以用于模拟物体的变形，例如拉伸、收缩等。它可以用来创建出令人惊叹的视觉效果，从而使视觉效果更加逼真。

想让别人进你的网页就感受到你的热情？

先看效果图：

只需要短短三步，需要的素材已经放到服务器上，可以直接调用，复制过去就能跑

前面两个没什么好看的，重点是看JavaScript里面的代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qifei</title>
    <link rel="stylesheet" href="style.css">
<body>
    <canvas id="canvas1"></canvas>
    <script src="script.js"></script>
</body>
</html>

style.css


#container {
    position: absolute;
    width: 800px;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%; 
    border: 3px solid white;
    font-size: 25px;
}
#canvas1 {
    border: 3px solid black;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    height: 700px;
    width: 500px;
    background: black;
}
#slider {
    width: 100%;
}
p {
    color: white;
}

javascript！

script.js

/** @type {HTMLCanvasElement} */
const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 700;
const explosions = [];
let canvasPosition = canvas.getBoundingClientRect();


class Explosion {
    constructor(x, y){

        this.spriteWidth = 200;
        this.spriteHeight = 179;
        this.width = this.spriteWidth * 0.7;
        this.height = this.spriteHeight * 0.7;
        this.x = x - this.width/2;
        this.y = y - this.height/2;
        this.image = new Image();
        this.image.src = "http://longsong.games/newmoon/static/image/boom.png";
        this.frame = 0;
        this.timer = 0;
    }
    update(){
        this.timer++;
        if (this.timer % 10 ===0){
            this.frame++;
        }


    }
    draw(){
        ctx.drawImage(this.image, this.spriteWidth * this.frame, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height);
    }
}
window.addEventListener('click',function(e){
    createAnimation(e);
});
window.addEventListener('mousemove',function(e){
    createAnimation(e);
});

function createAnimation(e){
    let positionX = e.x - canvasPosition.left;
    let positionY = e.y- canvasPosition.top;
    explosions.push(new Explosion(positionX, positionY));
}

function animate(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < explosions.length; i++){
        explosions[i].update();
        explosions[i].draw();
        if (explosions[i].frame > 5){
            explosions.splice(i, 1);
            i--;
        }
    }
    requestAnimationFrame(animate);
};
animate();