当前位置：首页 > JavaScript

js实现圆形

2026-04-07 00:49:44JavaScript

使用CSS绘制圆形

在HTML和CSS中，可以通过设置border-radius属性为50%来创建一个圆形。以下是一个简单的例子：

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

.circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

使用Canvas绘制圆形

Canvas API提供了arc方法来绘制圆形。以下是一个使用JavaScript和Canvas绘制圆形的例子：

js实现圆形

<canvas id="myCanvas" width="200" height="200"></canvas>

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

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

使用SVG绘制圆形

SVG是一种矢量图形格式，可以通过<circle>元素来绘制圆形。以下是一个例子：

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

使用JavaScript动态创建圆形

可以通过JavaScript动态创建DOM元素并设置样式来生成圆形。以下是一个例子：

js实现圆形

const circle = document.createElement('div');
circle.style.width = '100px';
circle.style.height = '100px';
circle.style.backgroundColor = 'yellow';
circle.style.borderRadius = '50%';
document.body.appendChild(circle);

使用CSS动画增强圆形效果

可以通过CSS动画为圆形添加动态效果。以下是一个例子：

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.circle {
  width: 100px;
  height: 100px;
  background-color: purple;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

使用JavaScript控制圆形位置

可以通过JavaScript动态控制圆形的位置。以下是一个例子：

const circle = document.createElement('div');
circle.style.width = '50px';
circle.style.height = '50px';
circle.style.backgroundColor = 'orange';
circle.style.borderRadius = '50%';
circle.style.position = 'absolute';
document.body.appendChild(circle);

let x = 0;
function moveCircle() {
  x += 1;
  circle.style.left = x + 'px';
  if (x < 200) {
    requestAnimationFrame(moveCircle);
  }
}
moveCircle();