写动态花瓣
时间: 2023-08-26 16:15:54 浏览: 36
好的,以下是用canvas画动态花瓣的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Flower Petals</title>
<meta charset="utf-8">
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="flower" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('flower');
const context = canvas.getContext('2d');
// 花瓣颜色
const petalColor = '#FFC0CB';
// 绘制花瓣
function drawPetal(x, y, radius, angle) {
context.beginPath();
context.moveTo(x, y);
context.arc(x, y - radius / 2, radius / 2, angle, angle + Math.PI, false);
context.arc(x, y + radius / 2, radius / 2, angle + Math.PI, angle + 2 * Math.PI, false);
context.closePath();
context.fillStyle = petalColor;
context.fill();
}
// 绘制花朵
function drawFlower(x, y, radius, numPetals, petalAngle) {
const angleIncrement = (2 * Math.PI) / numPetals;
for (let i = 0; i < numPetals; i++) {
drawPetal(x, y, radius, i * angleIncrement + petalAngle);
}
}
let petalAngle = 0;
// 绘制动态花朵
function animateFlower() {
requestAnimationFrame(animateFlower);
context.clearRect(0, 0, canvas.width, canvas.height);
drawFlower(200, 200, 100, 8, petalAngle);
petalAngle += 0.01;
}
// 开始动画
animateFlower();
</script>
</body>
</html>
```
运行以上代码,即可在浏览器中看到一个有8朵花瓣的动态花。其中,`petalAngle`变量用于控制花瓣的旋转角度,每帧增加一个很小的值,使得花瓣动起来。如果需要改变花瓣数量,可以调整`numPetals`参数的值。如果需要改变花瓣颜色,可以修改`petalColor`变量的值。