数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究Canvas中的爆炸动画
在本教程中，我们将学习如何使用 HTML 中的 canvas 创建爆炸动画效果。使用 canvas，我们可以轻松而强大的方式在网页上绘制图形。
让我们看看一些在 canvas 中创建爆炸动画的示例。
爆炸动画 1
我们将创建一个由 50 个随机颜色的粒子组成的爆炸，这些粒子起源于 canvas 的中心并向随机方向移动。粒子将继续移动，直到页面刷新。
算法
步骤 1 − 创建一个 HTML canvas 元素，其 id 为“explosion”，并将尺寸设置为 400x400 像素。
步骤 2 − 初始化一个粒子数组来存储粒子对象，以及 canvas 元素的 2D 渲染上下文。
步骤 3 − 定义一个函数 createExplosion( )，它将 50 个粒子对象推送到粒子数组中。每个粒子对象都具有 x 和 y 位置、半径、颜色、水平速度和垂直速度的属性。x 和 y 位置以及颜色设置为随机值，半径和速度设置为特定范围内的随机数。
步骤 4 − 定义一个函数 draw( )，它清除 canvas 并遍历粒子数组，使用其属性为每个粒子绘制一个圆形。
步骤 5 − 定义一个函数 update( )，它遍历粒子数组并根据其速度更新每个粒子的 x 和 y 位置。
步骤 6 − 定义一个函数 animate()，它调用 update( ) 和 draw( ) 函数，然后使用 requestAnimationFrame 调用自身。
步骤 7 − 调用 createExplosion() 函数来初始化粒子数组。
步骤 8 − 调用 animate() 函数以启动动画。
示例
在下面的示例中，我们正在创建运动的错觉。我们不断更改粒子的属性，并使用动画循环在 canvas 上持续绘制和更新它。
<html>
<head>
<style>
canvas {
border: 2px solid black;
}
</style>
</head>
<body>
<canvas id="explosion" width="550" height="400"></canvas>
<script>
const canvas = document.getElementById('explosion');
const context = canvas.getContext('2d');
let particles = [];
// Creates a new particle at the center of the canvas
function createExplosion() {
for (let i = 0; i < 50; i++) {
particles.push({
x: canvas.width / 2,
y: canvas.height / 2,
radius: Math.random() * 3 + 1,
color: `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`,
velocityX: Math.random() * 20 - 10,
velocityY: Math.random() * 20 - 10
});
}
}
// Renders the particles onto the canvas
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
context.beginPath();
context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
context.fillStyle = particle.color;
context.fill();
context.closePath();
});
}
// Updates the positions of the particles
function update() {
particles.forEach(particle => {
particle.x += particle.velocityX;
particle.y += particle.velocityY;
});
}
// The main animation loop
function animate() {
update();
draw();
requestAnimationFrame(animate);
}
createExplosion();
animate();
</script>
</body>
</html>
爆炸动画 2
我们将使用事件监听器并检测鼠标移动。当检测到 mousemove 事件时，我们将更新鼠标对象的 x 和 y 位置，并将五个新的粒子对象推送到数组中。因此，它看起来像一个爆炸。
算法
步骤 1 − 初始化以下变量 −
canvas − 具有 id“mCanvas”的 canvas 元素
ctx − canvas 的 2D 渲染上下文
particlesArray − 一个空数组，用于存储粒子对象
hue − 初始化为 0 的变量
步骤 2 − 将 canvas 元素的 height 和 width 分别设置为窗口的内部高度和宽度。
步骤 3 − 向窗口对象添加一个 resize 事件监听器，以便在调整窗口大小时更新 canvas 元素的高度和宽度。
步骤 4 − 初始化一个鼠标对象，其属性 x 和 y 都设置为未定义。
步骤 5 − 定义一个 Particles 类，其中包含以下方法
步骤 5.1 − constructor() 为每个粒子对象设置以下属性 −
x − 鼠标对象的当前 x 位置
y − 鼠标对象的当前 y 位置
size − 1 到 10 之间的随机数
speedX − -1.5 到 1.5 之间的随机数
speedY − -1.5 到 1.5 之间的随机数
步骤 5.2 − update(); 此方法分别通过其 speedX 和 speedY 值递增粒子的 x 和 y 位置。如果粒子的尺寸大于 .3，则将其递减 .1。
步骤 5.3 − draw(); 此方法使用色相值将 ctx 对象的填充样式设置为 HSL（色相、饱和度、亮度）颜色空间中的颜色，并使用粒子的 x 和 y 位置作为中心，其尺寸作为半径填充圆形路径。
步骤 6 − 定义一个 handleParticles() 函数来遍历 particlesArray。对于数组中的每个粒子，调用其 update 和 draw 方法。如果粒子的尺寸变为小于或等于 .3，则将其从数组中删除。
步骤 7 − 定义一个 animate() 函数来用半透明黑色矩形填充 canvas 元素，处理 particlesArray 中的粒子，并递增色相值。
步骤 8 − 使用 requestAnimationFrame 调用 animate() 函数。
步骤 9 − 向 canvas 元素添加一个 mousemove 事件监听器。当检测到 mousemove 事件时，更新鼠标对象的 x 和 y 属性，并将五个新的粒子对象推送到 particlesArray 中。
示例
在下面的示例中，我们将创建一个爆炸动画，只要鼠标移动就会执行。我们可以使用事件监听器来实现这一点。
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
box-sizing: border-box;
background: #000;
}
#mCanvas{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
}
</style>
</head>
<body>
<canvas id="mCanvas"></canvas>
<script>
const canvas = document.getElementById('mCanvas');
const ctx = canvas.getContext('2d');
const particlesArray = [];
let hue = 0;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
window.addEventListener('resize', function(){
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
})
const mouse = {
x: undefined,
y: undefined
}
class Particles{
constructor(){
this.x = mouse.x;
this.y = mouse.y;
this.size = Math.random()*10 + 1;
this.speedX = Math.random()*3 - 1.5;
this.speedY = Math.random()*3 - 1.5;
}
update(){
this.x += this.speedX;
this.y += this.speedY;
if(this.size > .3){
this.size -= .1;
}
}
draw(){
ctx.fillStyle = 'hsl(' + hue + ', 100%, 50%)';
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
} // end Particle
function handleParticles(){
for(let i=0 ; i<particlesArray.length ; i++){
particlesArray[i].update();
particlesArray[i].draw();
if(particlesArray[i].size <= .3){
particlesArray.splice(i, 1);
i--;
}
}
} // end of function
function animate(){
ctx.fillStyle = 'rgba(0,0,0, .1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
handleParticles();
hue++;
requestAnimationFrame(animate);
}
animate();
canvas.addEventListener('mousemove', function(event){
mouse.x = event.x;
mouse.y = event.y;
for(let i=0 ; i<5 ; i++){
particlesArray.push(new Particles());
}
})
</script>
</body>
</html>
我们使用 canvas 元素创建了一个爆炸效果。当鼠标移到 canvas 上时，页面会创建新的粒子对象并将其添加到数组中。粒子具有随机的位置、大小和速度，并使用随时间变化的色相值在 canvas 上绘制。粒子在移动时会缩小，并且当它们的大小变得足够小时会从数组中删除。canvas 使用 requestAnimationFrame 函数持续重新绘制，以创建动画效果。页面还在调整窗口大小时更新 canvas 元素的尺寸。
我们已经学习了如何在 canvas 中创建不同的爆炸动画效果。
957 次查看
