[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.arcTo()

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

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

Przykłady:

<script>

 window.onload = () => {
 
 const szer = 600;
 const wys = 300;
 
 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 const wartoscStartowa = document.getElementById("promien-start");
 const suwak = document.getElementById("promien");
 suwak.oninput = () => {
 wartoscStartowa.textContent = promien = suwak.value;
 };

 const punktA = { x: 300, y: 200 };
 const punktB = { x: 350, y: 150 };
 const punktC = { x: 400, y: 200 };

 let promien = suwak.value;

 function zadaniePunktTXT(punkt, xy, txt) {
 const { x, y } = xy;
 ctx.beginPath();
 ctx.arc(punkt.x, punkt.y, 2, 0, Math.PI * 2);
 ctx.fill();
 ctx.fillText(`${txt}:(${punkt.x}, ${punkt.y})`, punkt.x + x, punkt.y + y);
 }

 function zadaniePunkt(punkty) {
 punkty.forEach((punkt, i) => {
 zadaniePunktTXT(punkt, { x: 10, y: 0 }, `punkt ${i+1}`);
 });
 }

 function zadanieArc([punktA, punktB, punktC], r) {
 ctx.beginPath();
 ctx.moveTo(punktA.x, punktA.y);
 ctx.arcTo(punktB.x, punktB.y, punktC.x, punktC.y, r);
 ctx.lineTo(punktC.x, punktC.y);
 ctx.stroke();
 }

 function zadanieA(r) {

 const punktA = { x: 340, y: 49 };
 const punktB = { x: 120, y: 280 };
 const punktC = { x: 49, y: 49 };

 const opisPunktu = (punkt) => {
 ctx.fillText(`(${punkt.x},${punkt.y})`, punkt.x + 20, punkt.y + 10);
 };

 ctx.beginPath();
 ctx.moveTo(punktA.x, punktA.y);
 ctx.arcTo(punktB.x, punktB.y, punktC.x, punktC.y, r);
 ctx.lineTo(punktC.x, punktC.y);

 opisPunktu(punktA);
 opisPunktu(punktB);
 opisPunktu(punktC);

 ctx.stroke();

 }

 function praca(t) {

 const angle = (t / 1000) % (2 * Math.PI);
 const r = Math.abs(Math.cos(angle) * promien);

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

 zadanieArc([punktA, punktB, punktC], r);
 zadaniePunkt([punktA, punktB, punktC]);

 ctx.fillText(`ABC "${(r)}"`, 290, 250 - (Math.cos(angle) * promien));

 zadanieA(r);
 requestAnimationFrame(praca);
 
 }

 praca(0);

 };

</script>
 
<canvas id="canvas" width="1" height="1"></canvas>
<div>
 <label for="promien">Promień: </label>
 <input name="promien" type="range" id="promien" min="0" max="250" value="30" />
 <label for="promien" id="promien-start">30</label>
</div> 

Opis:
Metoda CanvasRenderingContext2D.arcTo() dodaje łuk kołowy do bieżącej ścieżki podrzędnej, wykorzystując podane punkty kontrolne i promień. Łuk jest automatycznie łączony z ostatnim punktem ścieżki linią prostą, jeśli jest to konieczne dla określonych parametrów. Parametry x1 - współrzędna osi x pierwszego punktu kontrolnego, y1 - współrzędna osi Y pierwszego punktu kontrolnego, x2 - współrzędna osi x drugiego punktu kontrolnego, y2 - współrzędna osi Y drugiego punktu kontrolnego, radius - promień łuku. Musi być nieujemny.

Zobacz też: