<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Butterfly Flight</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<div class="controls">
<button onclick="startAnimation()">Start</button>
<button onclick="stopAnimation()">Stop</button>
</div>
<script src="script.js"></script>
</body>
</html>
xxxxxxxxxx
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
canvas {
border: 5px solid #333;
border-radius: 10px;
}
.controls {
margin-top: 20px;
}
.controls button {
margin: 5px;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.controls button:hover {
background-color: #0056b3;
}
xxxxxxxxxx
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const upperLeftWing = [
{ cp1x: -50, cp1y: -100, x: -150, y: -50 },
{ cp1x: -100, cp1y: 0, x: 0, y: 0 }
];
const lowerLeftWing = [
{ cp1x: -50, cp1y: 50, x: -150, y: 100 },
{ cp1x: -100, cp1y: 50, x: 0, y: 0 }
];
const upperRightWing = [
{ cp1x: 50, cp1y: -100, x: 150, y: -50 },
{ cp1x: 100, cp1y: 0, x: 0, y: 0 }
];
const lowerRightWing = [
{ cp1x: 50, cp1y: 50, x: 150, y: 100 },
{ cp1x: 100, cp1y: 50, x: 0, y: 0 }
];
const butterflyBody = [
{ x: 0, y: -20 },
{ x: 0, y: 20 }
];
const butterflyHead = [
{ x: 0, y: -30 }
];
const butterflyAntennas = [
{ baseX: 0, baseY: -30, cp1x: -10, cp1y: -50, endX: -20, endY: -40 }, // Left antenna
{ baseX: 0, baseY: -30, cp1x: 10, cp1y: -50, endX: 20, endY: -40 } // Right antenna
];
let position = { x: canvas.width / 2, y: canvas.height / 2 };
let angle = 0;
let scale = 1;
let radius = 200; // Радиус окружности, по которой будет двигаться бабочка
let speed = -0.02; // Скорость движения бабочки по окружности
let animationFrameId;
let frame = 0;
// Запускаем анимацию автоматически при загрузке страницы
startAnimation();
function startAnimation() {
stopAnimation(); // Остановить предыдущую анимацию, если она есть
animationFrameId = requestAnimationFrame(animate);
}
function stopAnimation() {
cancelAnimationFrame(animationFrameId);
}
function animate() {
animationFrameId = requestAnimationFrame(animate);
update();
draw();
}
function update() {
frame = (frame + 1) % 60; // 60 кадров в секунду
// Обновление положения бабочки по окружности
angle += speed;
position.x = canvas.width / 2 + radius * Math.cos(angle);
position.y = canvas.height / 2 + radius * Math.sin(angle);
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Отрисовка цветов на задний фон
drawFlower(120, 100, 30, 5, 20, 6, "#ff9900");
drawFlower(300, 300, 40, 6, 25, 8, "#ff6699");
drawFlower(500, 250, 35, 7, 22, 7, "#66cc99");
drawFlower(100, 500, 25, 6, 15, 5, "#ffcc00");
drawFlower(400, 100, 35, 7, 20, 6, "#cc66ff");
drawFlower(450, 460, 30, 5, 18, 4, "#66ffcc");
drawFlower(100, 280, 35, 6, 22, 7, "#3399ff");
ctx.save();
ctx.translate(position.x, position.y);
ctx.rotate(angle);
ctx.scale(scale, scale);
// Отрисовка крыльев
drawWing(upperLeftWing);
drawWing(lowerLeftWing);
drawWing(upperRightWing);
drawWing(lowerRightWing);
// Отрисовка тела бабочки
ctx.beginPath();
ctx.moveTo(butterflyBody[0].x, butterflyBody[0].y);
for (let i = 1; i < butterflyBody.length; i++) {
ctx.lineTo(butterflyBody[i].x, butterflyBody[i].y);
}
ctx.lineWidth = 10;
ctx.strokeStyle = 'black';
ctx.stroke();
// Отрисовка головы бабочки
ctx.beginPath();
ctx.arc(butterflyHead[0].x, butterflyHead[0].y, 10, 0, Math.PI * 2, true);
ctx.fillStyle = 'black';
ctx.fill();
// Отрисовка усиков бабочки
for (let antenna of butterflyAntennas) {
ctx.beginPath();
ctx.moveTo(antenna.baseX, antenna.baseY);
ctx.quadraticCurveTo(antenna.cp1x, antenna.cp1y, antenna.endX, antenna.endY);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
}
ctx.restore();
}
function drawWing(points) {
ctx.beginPath();
ctx.moveTo(0, 0);
for (let point of points) {
ctx.quadraticCurveTo(point.cp1x, point.cp1y, point.x, point.y);
}
ctx.closePath();
ctx.fillStyle = '#6600ff';
ctx.fill();
}
function drawFlower(x, y, radius, petals, petalLength, petalWidth, flowerColor) {
const stemHeight = radius * 2.5;
const stemWidth = radius / 10;
const stemColor = "#228B22";
// Draw stem
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y + stemHeight);
ctx.lineWidth = stemWidth;
ctx.strokeStyle = stemColor;
ctx.stroke();
// Draw flower
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = flowerColor;
ctx.fill();
const angleIncrement = (Math.PI * 2) / petals;
ctx.fillStyle = flowerColor;
for (let i = 0; i < petals; i++) {
const angle = i * angleIncrement;
const x0 = x + Math.cos(angle) * radius;
const y0 = y + Math.sin(angle) * radius;
const x1 = x0 + Math.cos(angle) * petalLength;
const y1 = y0 + Math.sin(angle) * petalLength;
const cp1x = x1 + Math.cos(angle - Math.PI / 6) * petalWidth;
const cp1y = y1 + Math.sin(angle - Math.PI / 6) * petalWidth;
const cp2x = x1 + Math.cos(angle + Math.PI / 6) * petalWidth;
const cp2y = y1 + Math.sin(angle + Math.PI / 6) * petalWidth;
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x1, y1);
ctx.lineTo(x0, y0);
ctx.closePath();
ctx.fill();
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.