CanvasRenderingContext2D: arcTo() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.arcTo() Methode der Canvas 2D API fügt dem aktuellen Unterpfad einen Kreisbogen hinzu, indem sie die angegebenen Kontrollpunkte und den Radius verwendet. Der Bogen wird bei Bedarf automatisch mit einer geraden Linie mit dem zuletzt gezeichneten Punkt verbunden, zum Beispiel, wenn der Startpunkt und die Kontrollpunkte in einer Linie liegen.

Diese Methode wird häufig für abgerundete Ecken verwendet.

Hinweis: Sie könnten unerwartete Ergebnisse erhalten, wenn Sie einen relativ großen Radius verwenden: Die Verbindungsgerade des Bogens wird in die Richtung gehen, die erforderlich ist, um den angegebenen Radius zu erreichen.

Syntax

js
arcTo(x1, y1, x2, y2, radius)

Parameter

x1

Die x-Koordinate des ersten Kontrollpunkts.

y1

Die y-Koordinate des ersten Kontrollpunkts.

x2

Die x-Koordinate des zweiten Kontrollpunkts.

y2

Die y-Koordinate des zweiten Kontrollpunkts.

radius

Der Radius des Bogens. Muss nicht negativ sein.

Hinweise zur Verwendung

Nehmen Sie an, P0 ist der Punkt auf dem Pfad, wenn arcTo() aufgerufen wird, P1 = (x1, y1) und P2 = (x2, y2) sind die ersten bzw. zweiten Kontrollpunkte, und r ist der in dem Aufruf angegebene radius:

  • Wenn r negativ ist, wird eine IndexSizeError Ausnahme ausgelöst.
  • Wenn r 0 ist, verhält sich arcTo(), als ob P0, P1 und P2 kollinear (in einer Linie) sind.
  • Im Fall, dass alle Punkte kollinear sind, wird eine Linie von P0 zu P1 gezogen, es sei denn, die Punkte P0 und P1 sind deckungsgleich (haben die gleichen Koordinaten), in diesem Fall wird nichts gezeichnet.

Diese Bedingungen können im Beispiel Konstruktion eines arcTo() Pfades unten erstellt werden, um die Ergebnisse zu sehen.

Rückgabewert

Keiner (undefined).

Ausnahmen

IndexSizeError DOMException

Wird ausgelöst, wenn der radius einen negativen Wert hat.

Beispiele

Funktionsweise von arcTo()

Eine Möglichkeit, arcTo() zu betrachten, besteht darin, sich zwei gerade Segmente vorzustellen: eines vom Startpunkt zu einem ersten Kontrollpunkt und ein weiteres von dort zu einem zweiten Kontrollpunkt. Ohne arcTo() würden diese beiden Segmente eine scharfe Ecke bilden: arcTo() erzeugt an dieser Ecke einen Kreisbogen und glättet sie. Mit anderen Worten, der Bogen ist zu beiden Segmenten tangential.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Tangential lines
ctx.beginPath();
ctx.strokeStyle = "gray";
ctx.moveTo(200, 20);
ctx.lineTo(200, 130);
ctx.lineTo(50, 20);
ctx.stroke();

// Arc
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.moveTo(200, 20);
ctx.arcTo(200, 130, 50, 20, 40);
ctx.stroke();

// Start point
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.arc(200, 20, 5, 0, 2 * Math.PI);
ctx.fill();

// Control points
ctx.beginPath();
ctx.fillStyle = "red";
ctx.arc(200, 130, 5, 0, 2 * Math.PI); // Control point one
ctx.arc(50, 20, 5, 0, 2 * Math.PI); // Control point two
ctx.fill();

Ergebnis

In diesem Beispiel ist der durch arcTo() erstellte Pfad dick und schwarz. Tangentenlinien sind grau, Kontrollpunkte sind rot, und der Startpunkt ist blau.

Erstellen einer abgerundeten Ecke

Dieses Beispiel erstellt eine abgerundete Ecke mit arcTo(). Dies ist einer der häufigsten Verwendungszwecke der Methode.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

Der Bogen beginnt an dem durch moveTo() angegebenen Punkt: (230, 20). Er ist geformt, um Kontrollpunkte bei (90, 130) und (20, 20) zu passen, und hat einen Radius von 50. Die lineTo() Methode verbindet den Bogen mit (20, 20) durch eine gerade Linie. Beachten Sie, dass der zweite Kontrollpunkt des Bogens und der durch lineTo() angegebene Punkt gleich sind, was eine völlig glatte Ecke erzeugt.

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const p0 = { x: 230, y: 20 };
const p1 = { x: 90, y: 130 };
const p2 = { x: 20, y: 20 };

const labelPoint = (p) => {
  const offset = 10;
  ctx.fillText(`(${p.x},${p.y})`, p.x + offset, p.y + offset);
};

ctx.beginPath();
ctx.lineWidth = 4;
ctx.font = "1em sans-serif";
ctx.moveTo(p0.x, p0.y);
ctx.arcTo(p1.x, p1.y, p2.x, p2.y, 50);
ctx.lineTo(p2.x, p2.y);

labelPoint(p0);
labelPoint(p1);
labelPoint(p2);

ctx.stroke();

Ergebnis

Ergebnis eines großen Radius

Wenn Sie einen relativ großen Radius verwenden, kann der Bogen an einem Ort erscheinen, den Sie nicht erwartet haben. In diesem Beispiel geht die Verbindungsgerade des Bogens über statt unter die Koordinate, die durch moveTo() angegeben wird. Dies passiert, weil der Radius zu groß ist, um den Bogen vollständig unter dem Ausgangspunkt zu platzieren.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(180, 90);
ctx.arcTo(180, 130, 110, 130, 130);
ctx.lineTo(110, 130);
ctx.stroke();

Ergebnis

Konstruktion eines arcTo() Pfades

Die Demo zeigt die halbinfiniten Linien und den Kreis mit Zentrum C, tangential zu den Linien bei T1 und T2, die verwendet werden, um den durch arcTo() gerenderten Pfad zu bestimmen.

Beachten Sie, dass arcTo eine gerade Linie von P0 zu P1 erstellen wird, wenn alle Punkte in einer Linie sind. Außerdem wird nichts durch arcTo gezeichnet, wenn P0 und P1 die gleichen Koordinaten haben.

Zusätzlich zur Möglichkeit, den Bogensradius mit dem Slider einzustellen, können der Ausgangspunkt P0 und die Kontrollpunkte P1 und P2 durch Drag & Drop mit der Maus bei gedrückter linker Taste verschoben werden. Die numerischen Werte können ebenfalls bearbeitet werden, und die Pfeiltasten können verwendet werden, um ein unterstrichenes Element zu ändern, das im Fokus ist.

Animation des arcTo() Zeichnens

In diesem Beispiel können Sie mit dem Bogensradius herumspielen, um zu sehen, wie sich der Pfad ändert. Der Pfad wird vom Startpunkt p0 unter Verwendung von arcTo() mit den Kontrollpunkten p1 und p2 und einem Radius gezeichnet, der von 0 bis zum maximalen, mit dem Schieberegler gewählten Radius variiert. Dann vervollständigt ein lineTo() Aufruf den Pfad zu p2.

HTML

html
<div>
  <label for="radius">Radius: </label>
  <input name="radius" type="range" id="radius" min="0" max="100" value="50" />
  <label for="radius" id="radius-output">50</label>
</div>
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const controlOut = document.getElementById("radius-output");
const control = document.getElementById("radius");
control.oninput = () => {
  controlOut.textContent = radius = control.value;
};

const p1 = { x: 100, y: 100 };
const p2 = { x: 150, y: 50 };
const p3 = { x: 200, y: 100 };
let radius = control.value; // match with init control value

function labelPoint(p, offset, i = 0) {
  const { x, y } = offset;
  ctx.beginPath();
  ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillText(`${i}:(${p.x}, ${p.y})`, p.x + x, p.y + y);
}

function drawPoints(points) {
  points.forEach((p, i) => {
    labelPoint(p, { x: 0, y: -20 }, `p${i}`);
  });
}

// Draw arc
function drawArc([p0, p1, p2], r) {
  ctx.beginPath();
  ctx.moveTo(p0.x, p0.y);
  ctx.arcTo(p1.x, p1.y, p2.x, p2.y, r);
  ctx.lineTo(p2.x, p2.y);
  ctx.stroke();
}

function loop(t) {
  const angle = (t / 1000) % (2 * Math.PI);
  const rr = Math.abs(Math.cos(angle) * radius);

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  drawArc([p1, p2, p3], rr);
  drawPoints([p1, p2, p3]);
  requestAnimationFrame(loop);
}

loop(0);

Ergebnis

Spezifikationen

Specification
HTML
# dom-context-2d-arcto-dev

Browser-Kompatibilität

Siehe auch