使用canvas制作一个心跳的画特效

在前端开发中，使用HTML的<canvas>元素来制作心跳动画是一个有趣的项目。以下是一个简单的示例，展示如何使用<canvas>来创建一个模拟心跳的动画效果：

  1. HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心跳动画</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="heartbeatCanvas" width="400" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>
  1. JavaScript代码 (script.js)：
const canvas = document.getElementById('heartbeatCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
let radius = 50;
let maxRadius = 70;
let minRadius = 50;
let speed = 0.5;
let radiusChangeDirection = 1; // 1 for expanding, -1 for shrinking

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas before each draw

    // Draw the heart
    ctx.beginPath();
    ctx.moveTo(centerX, centerY - radius);
    ctx.bezierCurveTo(centerX, centerY - 30, centerX - 20, centerY, centerX - 20, centerY + 20);
    ctx.bezierCurveTo(centerX - 20, centerY + 50, centerX + 20, centerY + 50, centerX + 20, centerY + 20);
    ctx.bezierCurveTo(centerX + 20, centerY, centerX, centerY - 30, centerX, centerY - radius);
    ctx.fillStyle = 'red';
    ctx.fill();
    ctx.closePath();

    // Update the radius for the next draw
    radius += radiusChangeDirection * speed;
    if (radius > maxRadius || radius < minRadius) {
        radiusChangeDirection *= -1; // Reverse the direction when reaching max or min radius
    }
}

// Start the animation loop
setInterval(draw, 100); // Adjust the interval for smoother or faster animation

这段代码创建了一个简单的动画，其中一个心形图形在canvas上“跳动”。通过调整radius、maxRadius、minRadius和speed变量，你可以控制动画的效果和速度。同样，你可以通过调整setInterval函数的第二个参数来改变动画的帧率。

posted @ 2024-12-29 09:50  王铁柱6  阅读(63)  评论(0)    收藏  举报