当前位置：首页 > JavaScript

js实现动态画圆

2026-03-16 07:17:58JavaScript

使用 Canvas API 动态画圆

Canvas API 是 HTML5 提供的绘图工具，适合动态绘制图形。以下是一个完整示例：

js实现动态画圆

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

  function drawCircle(x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.stroke();
  }

  // 动态绘制逐渐变大的圆
  let radius = 0;
  function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawCircle(200, 200, radius);
    radius += 1;
    if (radius < 100) {
      requestAnimationFrame(animate);
    }
  }
  animate();
</script>

使用 SVG 动态创建圆形

SVG 是矢量图形标准，可通过 DOM 操作动态创建元素：

js实现动态画圆

<svg id="mySvg" width="400" height="400"></svg>
<script>
  const svg = document.getElementById('mySvg');

  function createCircle(cx, cy, r) {
    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
    circle.setAttribute('cx', cx);
    circle.setAttribute('cy', cy);
    circle.setAttribute('r', r);
    circle.setAttribute('stroke', 'black');
    circle.setAttribute('fill', 'none');
    svg.appendChild(circle);
    return circle;
  }

  // 动态改变半径
  const circle = createCircle(200, 200, 0);
  let radius = 0;
  function grow() {
    radius += 1;
    circle.setAttribute('r', radius);
    if (radius < 100) {
      requestAnimationFrame(grow);
    }
  }
  grow();
</script>

使用 CSS 动画实现

纯 CSS 结合 JavaScript 也能实现动态效果：

<div id="circle" style="
  width: 0;
  height: 0;
  border-radius: 50%;
  border: 2px solid black;
  position: absolute;
"></div>
<script>
  const circle = document.getElementById('circle');
  let size = 0;

  function expand() {
    size += 2;
    circle.style.width = size + 'px';
    circle.style.height = size + 'px';
    circle.style.left = (200 - size/2) + 'px';
    circle.style.top = (200 - size/2) + 'px';

    if (size < 200) {
      requestAnimationFrame(expand);
    }
  }
  expand();
</script>

使用第三方库（如 D3.js）

D3.js 提供了强大的数据可视化功能：

<script src="https://d3js.org/d3.v7.min.js"></script>
<svg id="d3-circle" width="400" height="400"></svg>
<script>
  const svg = d3.select("#d3-circle");

  svg.append("circle")
    .attr("cx", 200)
    .attr("cy", 200)
    .attr("r", 0)
    .attr("stroke", "black")
    .attr("fill", "none")
    .transition()
    .duration(2000)
    .attr("r", 100);
</script>