巧用原生JS代码实现鼠标点击爱心效果，秀出你的浪漫一面

2023-10-31 10:04:54

打造引人入胜的交互体验：实现鼠标点击爱心效果的完整指南

前言

在快节奏的数字世界中，网站的交互效果已成为提升用户参与度、打造沉浸式体验的关键因素。鼠标点击爱心效果是一种深受喜爱的交互效果，在各种场合中都大放异彩，如情人节、婚礼和周年纪念日等。本指南将深入探讨如何使用原生 JavaScript 代码实现鼠标点击爱心效果，让你轻松为你的项目增添一份浪漫情调。

实施步骤

1. 创建 HTML 文件

首先，新建一个 HTML 文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>

  <script src="script.js"></script>
</body>
</html>

2. 创建 JavaScript 文件

接下来，创建一个 JavaScript 文件（script.js），并添加以下代码：

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

// 定义爱心路径
const heartPath = new Path2D();
heartPath.moveTo(100, 100);
heartPath.quadraticCurveTo(150, 50, 200, 100);
heartPath.quadraticCurveTo(250, 150, 200, 200);
heartPath.quadraticCurveTo(150, 250, 100, 200);
heartPath.quadraticCurveTo(50, 150, 100, 100);

// 将爱心路径添加到画布中
ctx.fillStyle = 'red';
ctx.fill(heartPath);

// 鼠标点击事件监听器
canvas.addEventListener('click', function(e) {
  // 获取鼠标点击坐标
  const x = e.clientX;
  const y = e.clientY;

  // 检查鼠标点击坐标是否在爱心路径内
  if (ctx.isPointInPath(heartPath, x, y)) {
    // 如果鼠标点击坐标在爱心路径内，则重新绘制爱心
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'red';
    ctx.fill(heartPath);
  }
});