在前端开发中，使用HTML的<canvas>元素来制作心跳动画是一个有趣的项目。以下是一个简单的示例，展示如何使用<canvas>来创建一个模拟心跳的动画效果：
- 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>
- 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函数的第二个参数来改变动画的帧率。