canvas鼠标点击爱心粒子喷射下落点赞动画效果代码-html代码-BFW代码库

canvas鼠标点击爱心粒子喷射下落点赞动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas鼠标点击爱心粒子喷射下落点赞动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0;
  overflow: hidden;
  background-color: #fff0f0;
}

canvas {
  display: block;
}
</style>

  
</head>

<body translate="no">
  <canvas id="myCanvas"></canvas>
  
      <script >
// Get the canvas element
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Set canvas width and height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Array to store heart particles
const hearts = [];

// Random color generator
function getRandomColor() {
  var letters = '0123456789ABCDEF'.split('');
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.round(Math.random() * 15)];
  }
  return color;
}

// Function to create a single heart particle
function createHeart(x, y, size, speedX, speedY) {
  return {
    x: x,
    y: y,
    size: size,
    speedX: speedX,
    speedY: speedY };

}

// Function to draw a single heart
function drawHeart(heart) {
  ctx.fillStyle = "red";
  ctx.beginPath();
  var topCurveHeight = heart.size * 0.3;
  ctx.moveTo(heart.x, heart.y + topCurveHeight);

  // top left curve
  ctx.bezierCurveTo(
  heart.x, heart.y,
  heart.x - heart.size / 2, heart.y,
  heart.x - heart.size / 2, heart.y + topCurveHeight);


  // bottom left curve
  ctx.bezierCurveTo(
  heart.x - heart.size / 2, heart.y + (heart.size + topCurveHeight) / 2,
  heart.x, heart.y + (heart.size + topCurveHeight) / 2,
  heart.x, heart.y + heart.size);


  // bottom right curve
  ctx.bezierCurveTo(
  heart.x, heart.y + (heart.size + topCurveHeight) / 2,
  heart.x + heart.size / 2, heart.y + (heart.size + topCurveHeight) / .........完整代码请登录后点击上方下载按钮下载查看