当前位置：首页 > JavaScript

js实现圆形

2026-02-02 07:29:15JavaScript

使用 Canvas 绘制圆形

Canvas 是 HTML5 提供的绘图 API，可以通过 JavaScript 动态绘制图形。

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

ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();

这段代码会在画布上绘制一个半径为50像素的蓝色实心圆。arc方法的参数依次是圆心x坐标、圆心y坐标、半径、起始角度和结束角度。

使用 SVG 创建圆形

SVG 是矢量图形格式，可以直接在HTML中嵌入圆形元素。

js实现圆形

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red" />
</svg>

cx和cy属性定义圆心坐标，r定义半径，fill定义填充颜色。SVG图形是矢量的，可以无损缩放。

使用 CSS 绘制圆形

纯CSS可以通过border-radius属性将元素变为圆形。

js实现圆形

<div class="circle"></div>

<style>
.circle {
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
}
</style>

这种方法简单快捷，适合不需要复杂交互的静态圆形显示。border-radius: 50%是关键，它将元素的四个角都设为50%的圆角，形成完美圆形。

使用 WebGL 绘制3D圆形

对于需要3D效果的圆形，可以使用WebGL技术。

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

// 顶点着色器
const vsSource = `
  attribute vec2 aPosition;
  void main() {
    gl_Position = vec4(aPosition, 0.0, 1.0);
  }
`;

// 片段着色器
const fsSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`;

// 创建着色器程序等WebGL初始化代码...
// 创建圆形顶点数据并绘制

WebGL实现较为复杂，需要编写着色器程序，适合需要高性能图形渲染的场景。这种方法可以创建带光照、纹理等效果的3D圆形。