如何在Canvas上实现arcTo线条的绘制动画效果？

Great question! Animating arcTo() is trickier than straight lines—since it relies on calculating a circular arc segment rather than simple linear interpolation. Let's walk through how to replicate your straight-line animation effect for curved arcs created with arcTo().

Core Idea #

The key is to break down the arcTo() into its underlying geometric components:

• First, calculate the full arc's center point, start angle, and end angle based on your arcTo() parameters.
• Then, use your animation progress percentage to draw only the portion of the arc from the start up to the current progress point.

Full Working Code #

Here's how to adapt your existing code to animate an arcTo() curve:

const c = canvas.getContext("2d");
const width = window.innerWidth;
const height = window.innerHeight;
let complete = false;
let percent = 1;

// Helper to calculate arcTo's underlying circle parameters
function getArcToGeometry(x0, y0, x1, y1, x2, y2, radius) {
  // Calculate vectors for the lines leading to/from the control point
  const v0 = { x: x1 - x0, y: y1 - y0 };
  const v1 = { x: x1 - x2, y: y1 - y2 };
  
  // Normalize vectors
  const len0 = Math.hypot(v0.x, v0.y);
  const len1 = Math.hypot(v1.x, v1.y);
  const u0 = { x: v0.x / len0, y: v0.y / len0 };
  const u1 = { x: v1.x / len1, y: v1.y / len1 };
  
  // Calculate angle bisector direction
  const bisector = { x: u0.x + u1.x, y: u0.y + u1.y };
  const bisectorLen = Math.hypot(bisector.x, bisector.y);
  const uBisector = { x: bisector.x / bisectorLen, y: bisector.y / bisectorLen };
  
  // Distance from control point to arc center
  const d = radius / Math.sin(Math.acos(u0.x * u1.x + u0.y * u1.y) / 2);
  
  // Arc center point
  const cx = x1 + uBisector.x * d;
  const cy = y1 + uBisector.y * d;
  
  // Start and end angles (relative to center)
  const startAngle = Math.atan2(y0 - cy, x0 - cx);
  const endAngle = Math.atan2(y2 - cy, x2 - cx);
  
  return { cx, cy, startAngle, endAngle, radius };
}

function drawAnimatedArc(x0, y0, x1, y1, x2, y2, radius, color, progress) {
  c.beginPath();
  c.lineWidth = 10;
  c.strokeStyle = color;
  
  // Get the full arc geometry
  const { cx, cy, startAngle, endAngle } = getArcToGeometry(x0, y0, x1, y1, x2, y2, radius);
  
  // Calculate the angle progress (handle clockwise/counter-clockwise)
  let angleDiff = endAngle - startAngle;
  if (angleDiff < 0) angleDiff += Math.PI * 2;
  const currentAngle = startAngle + angleDiff * (progress / 100);
  
  // Draw from start point to the start of the arc
  c.moveTo(x0, y0);
  c.lineTo(cx + radius * Math.cos(startAngle), cy + radius * Math.sin(startAngle));
  
  // Draw the partial arc up to current progress
  c.arc(cx, cy, radius, startAngle, currentAngle);
  
  c.stroke();
  c.closePath();
}

function drawArcAnimation() {
  if (!complete) {
    requestAnimationFrame(drawArcAnimation);
  }
  
  if (percent >= 100) {
    complete = true;
    percent = 100;
  } else {
    percent += 1;
  }
  
  c.clearRect(0, 0, width, height);
  
  // Define your arcTo parameters here: start(x0,y0), control(x1,y1), end(x2,y2), radius
  drawAnimatedArc(300, 300, 600, 100, 900, 300, 150, "black", percent);
}

drawArcAnimation();

Key Explanations #

1. getArcToGeometry(): This helper calculates the hidden geometric details of the arcTo() curve—like the arc's center, start angle, and end angle. These are necessary because we can't directly animate arcTo() itself; we need to build the arc incrementally with arc().
2. Angle Calculation: We calculate the total angle span of the arc, then use the progress percentage to determine how much of that angle to draw each frame.
3. Progressive Drawing: Each frame, we draw from the starting point to the arc's start, then draw the portion of the arc up to the current progress angle.

This approach mimics the exact curve that arcTo() would draw, but animates it incrementally just like your straight-line example.

内容的提问来源于stack exchange，提问作者Michael Horace