鼠标烟雾拖尾（含代码）

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

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

先看效果图：

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

前面两个没什么好看的，重点是看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();

鼠标烟雾拖尾（含代码）相关推荐

html鼠标拖尾效果,JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.e ...
Unity 制作鼠标光标拖尾
首先创建个Empty起名Mouse 然后给Empty添加 Trail Renderer (设置好粗细,颜色,时间等设置) 创建脚本挂载到Mouse上拖尾组件以及脚本 using UnityEngin ...
给自己鼠标改个样式，再加一个炫酷的拖尾 #HTML鼠标皮肤拖尾
在自己的网页上面,有时候觉得太单调,想给自己的鼠标加点皮肤下面的代码拿过来就直接可以用的,因为都是站点里面的图片,不用自己去找图片也能先玩玩看想要自己修改样式的话,只用改里面几个url后面的图片地 ...
html+js 实现鼠标粒子拖尾效果其中调用underscore和jQuery库
演示视频: 运用了underscore和jQuery库,将库导入项目文件并调用即可, 如下代码的: <script src="underscore.min.js" type= ...
js 实现鼠标移动拖尾效果
img需要添加绝对定位 img { position: absolute; } js代码: //声明一个变量计次 var count=0; //鼠标相对于文档移动时触发移动时间 document.on ...
原生JS鼠标移动拖尾效果
JS 代码 function getMousePos(event) {var e = event || window.event;var mouseInfo = {mouseX : e.clientX ...
cocos 随机变色的拖尾
原文链接: cocos 随机变色的拖尾上一篇: cocos 扇形进度条下一篇: css resize属性将div变成可以拖动修改大小配合object-fit实现图片大小适应的效果 https:// ...
JS-鼠标彩色拖尾小效果
实现步骤解析: * 这原本就是一个鼠标后面跟随一串小方块的效果, * 后来我就想,运用之前学的随机数的案例把小方块的颜色做成彩色的, * 并且每一个小方块的色彩是随机分配而不是我自己手 ...
processing制作熊猫头像跟随鼠标拖尾
先上效果图: 我演示时电脑有点卡所以看着有些顺畅,你的电脑应该是没有问题的. processing实现跟随鼠标拖尾其实不难,在这篇文章中我将介绍图案封装.封装图案整体缩放.数组的创建方法以及一些逻辑处 ...

鼠标烟雾拖尾（含代码）

index.html

style.css

javascript！

鼠标烟雾拖尾（含代码）相关推荐

最新文章

热门文章