当前位置：首页 > JavaScript

js实现风车

2026-04-05 08:31:10JavaScript

实现风车动画的JavaScript方法

使用CSS动画结合JavaScript动态控制，可以创建一个旋转的风车效果。以下是实现步骤：

HTML结构

js实现风车

<div class="windmill">
  <div class="blades"></div>
  <div class="center"></div>
</div>

CSS样式

.windmill {
  position: relative;
  width: 200px;
  height: 200px;
}

.blades {
  width: 100%;
  height: 100%;
  background: transparent;
  position: absolute;
  animation: spin 5s linear infinite;
}

.center {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

JavaScript控制

js实现风车

// 动态创建风车叶片
const blades = document.querySelector('.blades');
for (let i = 0; i < 4; i++) {
  const blade = document.createElement('div');
  blade.className = 'blade';
  blade.style.transform = `rotate(${i * 90}deg)`;
  blades.appendChild(blade);
}

// 添加叶片样式
const style = document.createElement('style');
style.textContent = `
  .blade {
    position: absolute;
    width: 80px;
    height: 30px;
    background: red;
    top: 50%;
    left: 50%;
    transform-origin: left center;
    border-radius: 15px;
  }
`;
document.head.appendChild(style);

使用Canvas实现风车

通过Canvas绘图API可以创建更灵活的风车动画：

const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
let angle = 0;

function drawWindmill() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制中心点
  ctx.fillStyle = '#333';
  ctx.beginPath();
  ctx.arc(150, 150, 10, 0, Math.PI * 2);
  ctx.fill();

  // 绘制叶片
  ctx.save();
  ctx.translate(150, 150);
  ctx.rotate(angle);

  for (let i = 0; i < 4; i++) {
    ctx.save();
    ctx.rotate(i * Math.PI / 2);
    ctx.fillStyle = `hsl(${i * 90}, 80%, 50%)`;
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(80, -15);
    ctx.lineTo(80, 15);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }

  ctx.restore();

  angle += 0.02;
  requestAnimationFrame(drawWindmill);
}

drawWindmill();

响应式风车实现

添加鼠标交互控制风车转速：

let speed = 0.02;
document.addEventListener('mousemove', (e) => {
  speed = (e.clientX / window.innerWidth) * 0.1;
});

function drawInteractiveWindmill() {
  // ...之前的绘制代码...
  angle += speed;
  requestAnimationFrame(drawInteractiveWindmill);
}

这些方法提供了从简单到进阶的风车实现方案，可根据需求选择CSS动画或Canvas绘图方式。CSS方案适合简单场景，Canvas方案则提供更多自定义和控制选项。