✨博主:命运之光
🌸专栏:Python星辰秘典
🐳专栏:web开发(简单好用又好看)
❤️专栏:Java经典程序设计
☀️博主的其他文章:点击进入博主的主页
前言:欢迎踏入我的Web项目专栏,一段神奇而令人陶醉的数字世界!
🌌在这里,我将带您穿越时空,揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力,我创造了一系列令人惊叹的Web项目,它们仿佛是从梦境中涌现而出。
🌌在这个专栏中,您将遇到华丽的界面,如流星划过夜空般迷人;您将感受到动态的交互,如魔法般让您沉浸其中;您将探索响应式设计的玄妙,让您的屏幕变幻出不同的绚丽景象。
🌌无论您是一个探险家还是一位嗜血的代码巫师,这个专栏将成为您的魔法书。我将分享每个项目的秘密,解开编码的谜题,让您也能够拥有制作奇迹的力量。
🌌准备好了吗?拿起您的键盘,跟随我的指引,一起进入这个神秘而充满惊喜的数字王国。在这里,您将找到灵感的源泉,为自己创造出一段奇幻的Web之旅!
目录
🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
简介
欢迎来到本篇技术博客!今天,我们将一起学习如何使用HTML5 Canvas和JavaScript创造震撼的视觉效果。我们将绘制彩色粒子,使其在鼠标移动的轨迹上生成,形成炫酷的粒子动画。让我们开始吧!
动态图展示
准备工作
在开始之前,我们需要做一些准备工作:
- 确保您有一个支持HTML5的现代web浏览器(如Chrome、Firefox、Safari等)。
- 创建一个HTML文件,并复制以下代码作为基础:
<!DOCTYPE html>
<html>
<head>
<title>震撼视觉效果</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: black;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// JavaScript代码将在下面添加
</script>
</body>
</html>
绘制彩色粒子
在我们的HTML文件中,我们已经有了一个空的Canvas元素,其ID为canvas
,并且我们已经设置了Canvas的宽度和高度与窗口大小相同。接下来,我们将添加JavaScript代码来绘制彩色粒子。
// 获取Canvas元素和2D绘图上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const colors = ["#FFD700", "#FF6347", "#00FFFF", "#FF69B4", "#32CD32", "#FF4500", "#00CED1", "#FFFF00"];
// 创建粒子对象
class Particle {
// ... 粒子构造函数的代码 ...
}
// 创建粒子
function createParticles(x, y) {
// ... 创建粒子的代码 ...
}
// 鼠标移动事件
canvas.addEventListener("mousemove", (e) => {
// ... 鼠标移动事件的代码 ...
});
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新和绘制粒子
for (let i = particles.length - 1; i >= 0; i--) {
const particle = particles[i];
particle.update();
particle.draw();
// 移除不可见或消失的粒子
if (particle.size <= 0) {
particles.splice(i, 1);
}
}
}
animate();
在这段代码中,我们定义了一个用于存储粒子的数组particles
,以及一个包含了几种颜色的数组colors
,我们将从中随机选择粒子的颜色。
接下来,我们创建了一个构造函数Particle
来构造粒子对象,它将包含粒子的位置、颜色和大小等属性。在构造函数中,我们使用随机速度来使粒子有一个随机的方向运动。
最后,我们定义了一个createParticles
函数,用于在鼠标移动事件中创建粒子。在动画循环函数animate
中,我们使用requestAnimationFrame
方法来循环绘制和更新每个粒子。在每一帧中,我们首先使用ctx.clearRect
方法来清空画布,然后遍历每个粒子对象,分别调用其update
和draw
方法。
运行效果
现在,将上述HTML代码保存为一个HTML文件,并在浏览器中打开它。您将会看到一个黑色背景的页面,当您在页面上移动鼠标时,彩色粒子将根据鼠标移动的轨迹生成,并形成炫酷的视觉效果。
完整代码
<!DOCTYPE html>
<html>
<head>
<title>震撼视觉效果</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: black;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const colors = ["#FFD700", "#FF6347", "#00FFFF", "#FF69B4", "#32CD32", "#FF4500", "#00CED1", "#FFFF00"];
// 创建粒子对象
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.size = Math.random() * 10 + 5;
this.vx = (Math.random() - 0.5) * 5;
this.vy = (Math.random() - 0.5) * 5;
}
update() {
this.x += this.vx;
this.y += this.vy;
this.size -= 0.1;
}
draw() {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// 创建粒子
function createParticles(x, y) {
for (let i = 0; i < 10; i++) {
const color = colors[Math.floor(Math.random() * colors.length)];
const particle = new Particle(x, y, color);
particles.push(particle);
}
}
// 鼠标移动事件
canvas.addEventListener("mousemove", (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
createParticles(mouseX, mouseY);
});
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新和绘制粒子
for (let i = particles.length - 1; i >= 0; i--) {
const particle = particles[i];
particle.update();
particle.draw();
// 移除不可见或消失的粒子
if (particle.size <= 0) {
particles.splice(i, 1);
}
}
}
animate();
</script>
</body>
</html>
代码的使用方法(超简单什么都不用下载)
🍓1.打开记事本
🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可
🍓3.打开html文件(大功告成(●'◡'●))
总结
在本篇博客中,我们学习了如何使用HTML5 Canvas和JavaScript创造震撼的视觉效果。通过定义粒子对象,并在鼠标移动事件中生成彩色粒子,我们成功地创造了一个炫酷的粒子动画。
希望这个简单而有趣的项目能够激发您创造更多视觉效果的灵感。感谢您的阅读,祝您编程愉快!
本章的内容就到这里了,觉得对你有帮助的话就支持一下博主把~
🌌点击下方个人名片,交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓