当前位置：首页 > JavaScript

js实现爱心

2026-04-05 22:46:27JavaScript

使用Canvas绘制爱心

在HTML中创建一个Canvas元素，通过JavaScript绘制爱心形状。以下代码展示如何动态生成一个红色爱心：

const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100, 40);
ctx.bezierCurveTo(40, 40, 30, 100, 100, 150);
ctx.bezierCurveTo(170, 100, 160, 40, 100, 40);
ctx.fillStyle = 'red';
ctx.fill();

使用CSS和HTML创建爱心

通过伪元素和CSS transform实现纯CSS爱心效果：

<style>
.heart {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotate(45deg);
  background-color: red;
}
.heart:before, .heart:after {
  content: '';
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
}
.heart:before {
  top: -50px;
  left: 0;
}
.heart:after {
  top: 0;
  left: -50px;
}
</style>
<div class="heart"></div>

使用SVG绘制爱心

SVG矢量图形方案，适合需要缩放的情况：

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M100,30 C60,10 20,50 50,90 C70,120 100,150 100,150 C100,150 130,120 150,90 C180,50 140,10 100,30 Z" fill="red"/>
</svg>

动态跳动爱心动画

结合CSS动画实现跳动效果：

const heart = document.createElement('div');
heart.style.width = '50px';
heart.style.height = '50px';
heart.style.backgroundColor = 'red';
heart.style.position = 'absolute';
heart.style.borderRadius = '50%';
heart.style.transform = 'rotate(45deg)';
heart.style.animation = 'beat 1s infinite';

document.body.appendChild(heart);

const style = document.createElement('style');
style.textContent = `
@keyframes beat {
  0% { transform: rotate(45deg) scale(1); }
  50% { transform: rotate(45deg) scale(1.3); }
  100% { transform: rotate(45deg) scale(1); }
}
`;
document.head.appendChild(style);

使用数学函数绘制爱心曲线

基于爱心曲线数学方程的实现：

js实现爱心

const canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
ctx.translate(200, 200);

for (let t = 0; t < 2 * Math.PI; t += 0.01) {
  const x = 16 * Math.pow(Math.sin(t), 3);
  const y = 13 * Math.cos(t) - 5 * Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t);
  ctx.fillRect(x * 10, -y * 10, 4, 4);
}

每种方法适用于不同场景，Canvas方案适合需要动态交互的情况，CSS方案性能最佳，SVG方案保持清晰度，数学函数方案可精确控制爱心形状。