浏览器也能画 3D 球，而且 4 种方法你总能找到适合自己的

在浏览器中，我们常常会遇到一个问题，我们想要展示一个 3D 球体，但是在浏览器中并没有内置的方法可以让我们直接绘制一个球体。

有的人可能会说：“我们可以使用 Three.js 啊，它是一个专门用于在浏览器中渲染 3D 图形的三维库。”
但是，其实我们并不用引入这么大的库来仅仅是为了绘制一个球体，实际上，我们可以通过 CSS 和 JavaScript 就可以轻松地绘制出一个 3D 球体。

在本文中，我们将介绍四种在浏览器中绘制球体的常用方法，同时我们还会为你演示如何使用这些方法来实现各种常见的球体效果。

1. CSS 圆形渐变

第一种方法是使用 CSS 的圆形渐变来绘制一个球体。这种方法非常简单，而且可以实现非常漂亮的球体效果。

.ball {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #000000 0%, #ffffff 100%);
}

这段 CSS 代码会创建一个 200 像素宽、200 像素高的球体。球体的背景色使用了一个径向渐变，渐变的颜色从黑色到白色。

2. CSS3D 变换

第二种方法是使用 CSS3D 变换来绘制一个球体。这种方法比第一种方法复杂一些，但是可以实现更复杂的球体效果。

.ball {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #000000;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

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

这段 CSS 代码会创建一个 200 像素宽、200 像素高的球体。球体的背景色为黑色。球体使用 CSS3D 变换来实现旋转动画。

3. Canvas

第三种方法是使用 Canvas 来绘制一个球体。这种方法比较复杂，但是可以实现非常精细的球体效果。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var radius = 100;
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = '#000000';
ctx.fill();

这段 JavaScript 代码会创建一个 100 像素半径的球体。球体的中心位于画布的中心。球体的颜色为黑色。

4. DOM

第四种方法是使用 DOM 来绘制一个球体。这种方法非常简单，但是只能实现非常简单的球体效果。

<div class="ball"></div>

.ball {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #000000;
}

这段 HTML 和 CSS 代码会创建一个 200 像素宽、200 像素高的球体。球体的背景色为黑色。

总结

以上四种方法都可以用来在浏览器中绘制球体。每种方法都有不同的特点，我们可以根据自己的需求来选择使用哪种方法。