<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单色植物生成特效</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f8ff;
cursor: pointer;
font-family: 'Arial', sans-serif;
}
canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.footer {
position: fixed;
bottom: 10px;
left: 0;
width: 100%;
text-align: center;
color: #666;
font-size: 12px;
z-index: 2;
}
.footer a {
color: #4a6da7;
text-decoration: none;
}
.instructions {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #4a6da7;
font-size: 18px;
z-index: 2;
background: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="instructions">
点击屏幕任意位置生成单色植物图案<br>
点击次数越多，花园越茂盛
</div>
<div class="footer">
创意植物生成特效</a>
</div>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 设置canvas大小为窗口大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 植物颜色数组
const plantColors = [
'#4a6da7', // 蓝色
'#5a8f5a', // 绿色
'#8a6d4a', // 棕色
'#6d4a8a', // 紫色
'#4a8a6d' // 蓝绿色
];
// 存储所有植物
const plants = [];
// 植物类
class Plant {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = Math.random() * 30 + 20;
this.color = plantColors[Math.floor(Math.random() * plantColors.length)];
this.branches = Math.floor(Math.random() * 3) + 3;
this.angle = Math.random() * Math.PI * 2;
this.growthSpeed = Math.random() * 0.5 + 0.5;
this.age = 0;
this.maxAge = Math.random() * 100 + 100;
}
// 绘制植物
draw() {
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
// 绘制主干
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, -this.size);
ctx.strokeStyle = this.color;
ctx.lineWidth = this.size / 10;
ctx.stroke();
// 绘制叶子/花瓣
for (let i = 0; i < this.branches; i++) {
const angle = (i / this.branches) * Math.PI * 2;
const leafSize = this.size * 0.6;
const leafDistance = this.size * 0.7;
ctx.save();
ctx.rotate(angle);
ctx.translate(0, -leafDistance);
// 绘制叶子
ctx.beginPath();
ctx.ellipse(0, 0, leafSize/2, leafSize, 0, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.globalAlpha = 0.7;
ctx.fill();
ctx.restore();
}
ctx.restore();
}
// 更新植物生长
update() {
if (this.age < this.maxAge) {
this.size += this.growthSpeed;
this.age++;
}
}
}
// 鼠标点击事件
canvas.addEventListener('click', function(e) {
// 创建3-5个新植物
const plantCount = Math.floor(Math.random() * 3) + 3;
for (let i = 0; i < plantCount; i++) {
// 在点击位置周围随机分布
const x = e.clientX + (Math.random() - 0.5) * 100;
const y = e.clientY + (Math.random() - 0.5) * 100;
plants.push(new Plant(x, y));
}
// 隐藏提示文字
document.querySelector('.instructions').style.opacity = '0';
});
// 窗口大小改变时调整canvas大小
window.addEventListener('resize', function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// 动画循环
function animate() {
// 半透明背景，制造淡出效果
ctx.fillStyle = 'rgba(240, 248, 255, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 更新并绘制所有植物
for (let i = 0; i < plants.length; i++) {
plants[i].update();
plants[i].draw();
// 移除太老的植物
if (plants[i].age > plants[i].maxAge + 50) {
plants.splice(i, 1);
i--;
}
}
requestAnimationFrame(animate);
}
// 启动动画
animate();
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
