当前位置：首页 > JavaScript

js实现圆球

2026-04-05 23:24:29JavaScript

使用 Canvas 绘制圆球

在 HTML5 的 Canvas 中绘制圆球可以通过 arc 方法实现。以下是一个完整的示例代码：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 绘制圆球
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.closePath();
</script>

使用 CSS 创建圆球

通过 CSS 的 border-radius 属性可以轻松创建圆球效果：

<div class="ball"></div>
<style>
  .ball {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 50%;
  }
</style>

添加 3D 效果

使用 CSS 的 box-shadow 可以为圆球添加立体感：

.ball-3d {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle at 30% 30%, #fff, #0078ff);
  border-radius: 50%;
  box-shadow: inset -10px -10px 20px rgba(0, 0, 0, 0.3);
}

动画效果

通过 CSS 动画让圆球动起来：

.bouncing-ball {
  width: 50px;
  height: 50px;
  background-color: green;
  border-radius: 50%;
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-50px); }
}

使用 SVG 绘制圆球

SVG 也是创建圆球的有效方式：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="purple" />
</svg>

物理引擎实现

使用 Matter.js 物理引擎创建真实的圆球运动：

js实现圆球

<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.18.0/matter.min.js"></script>
<canvas id="physics-ball"></canvas>
<script>
  const engine = Matter.Engine.create();
  const render = Matter.Render.create({
    canvas: document.getElementById('physics-ball'),
    engine: engine,
    options: {
      width: 400,
      height: 400,
      wireframes: false
    }
  });

  const ball = Matter.Bodies.circle(200, 100, 30);
  const ground = Matter.Bodies.rectangle(200, 390, 400, 20, { isStatic: true });

  Matter.Composite.add(engine.world, [ball, ground]);
  Matter.Engine.run(engine);
  Matter.Render.run(render);
</script>

每种方法都有其适用场景，Canvas 适合动态绘制，CSS 适合静态展示，SVG 适合矢量图形，物理引擎则适合需要真实物理效果的情况。