在Canvas上绘制粒子效果

翻滚的胖子
2023-09-04 11:48:03
前端技术
JavaScript PHP

概述

Canvas是HTML5中的一个重要功能，它可以让我们在网页上进行绘图操作。本教程将教你如何使用Canvas绘制粒子效果。

准备工作

在开始之前，我们需要准备一些基础的HTML和JavaScript代码。首先，在HTML文件中添加一个Canvas元素：

然后，在JavaScript文件中获取Canvas元素，并获取绘图上下文：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

绘制粒子

首先，我们需要定义一个粒子对象，包含粒子的坐标、速度、颜色等属性。然后，我们使用一个循环来更新粒子的位置，并在Canvas上绘制每个粒子：

function Particle(x, y, vx, vy, color) {
  this.x = x;
  this.y = y;
  this.vx = vx;
  this.vy = vy;
  this.color = color;
}

Particle.prototype.update = function() {
  this.x += this.vx;
  this.y += this.vy;
}

Particle.prototype.draw = function() {
  ctx.fillStyle = this.color;
  ctx.fillRect(this.x, this.y, 5, 5);
}

var particles = [];

for (var i = 0; i < 100; i++) {
  var x = Math.random() * canvas.width;
  var y = Math.random() * canvas.height;
  var vx = Math.random() * 2 - 1;
  var vy = Math.random() * 2 - 1;
  var color = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
  particles.push(new Particle(x, y, vx, vy, color));
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].draw();
  }

  requestAnimationFrame(animate);
}

animate();