当前位置：首页 > JavaScript

js实现圆球

2026-02-01 06:55:04JavaScript

使用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创建3D圆球效果

通过CSS的border-radius和box-shadow可以创建视觉上的3D球体效果：

js实现圆球

<div class="sphere"></div>
<style>
  .sphere {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
      #ffffff, #ff0000);
    box-shadow: inset -10px -10px 20px rgba(0,0,0,0.5);
  }
</style>

使用Three.js创建3D球体

对于更复杂的3D球体效果，可以使用Three.js库：

js实现圆球

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.SphereGeometry(5, 32, 32);
const material = new THREE.MeshBasicMaterial({color: 0xffff00});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

camera.position.z = 15;

function animate() {
  requestAnimationFrame(animate);
  sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

SVG实现圆球

使用SVG可以创建矢量圆球图形：

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="blue" />
  <radialGradient id="gradient" cx="30%" cy="30%" r="70%">
    <stop offset="0%" stop-color="white"/>
    <stop offset="100%" stop-color="darkblue"/>
  </radialGradient>
</svg>

物理引擎中的圆球实现

使用matter.js物理引擎创建具有物理特性的圆球：

const Engine = Matter.Engine,
      Render = Matter.Render,
      World = Matter.World,
      Bodies = Matter.Bodies;

const engine = Engine.create();
const render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: 800,
    height: 600,
    wireframes: false
  }
});

const ball = Bodies.circle(400, 200, 40, {
  restitution: 0.8,
  friction: 0.01
});

World.add(engine.world, [ball, Bodies.rectangle(400, 610, 810, 60, { isStatic: true })]);

Engine.run(engine);
Render.run(render);