J'essaie d'expérimenter le canevas en HTML, et quand je crée un cercle en utilisant .arc (), je ne sais pas comment obtenir tous ses points. Quelqu'un sait comment?
3 Réponses :
Utilisation de svg en html, par exemple:
image du cercle:
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg>
Vous pouvez également modifier le rayon et d'autres détails. Voir ce lien: https://www.w3schools.com/graphics/svg_intro.asp
Vous pouvez dessiner un cercle et obtenir ses points, vous pouvez faire quelque chose comme ceci:
<canvas id="circle"></canvas>
canvas{border:1px solid;}
let c = document.getElementById("circle");
let ctx = c.getContext("2d");
let cw = c.width = 250;
let ch = c.height = 200;
let cx = cw / 2,
cy = ch / 2;
//the array of points
let points = []
ctx.lineWidth = 3;
ctx.strokeStyle = "#64b150";
//circle's radius
let r = 75;
ctx.beginPath();
for (let a = 0; a < 2*Math.PI; a+=.1) {
let o = {}//a point on the circle
o.x = cx + r * Math.cos(a);
o.y = cy + r * Math.sin(a);
points.push(o);
ctx.lineTo(o.x, o.y)
}
ctx.closePath();
ctx.stroke();
Pendant que Kaiido commente, vous devez choisir un incrément différent au lieu de .1: pour (soit a = 0; a
Merci. Je l'utilisais pour un projet bêta .
Si je peux me permettre, 0,1π semble assez arbitraire, non pas que ce soit mauvais en soi, mais il devrait probablement y avoir une note à ce sujet, en particulier sur le fait que cela peut ne pas bien paraître sur les grands cercles
Je suis d'accord. Vous devrez peut-être choisir un incrément différent.
Pour rendre un cercle approximatif et acquérir les points de ce cercle, vous pouvez dessiner une série de segments de ligne dans une ligne de motif circulaire comme suit:
<canvas id="canvas" width="200" height="200"></canvas>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
/* Center and radius of circle */
const centerX = 50;
const centerY = 50;
const radius = 25;
/* Array containing your points */
const points = [];
/* Configure line rendering and start drawing a path */
ctx.lineWidth = 2;
ctx.strokeStyle = "red";
ctx.beginPath();
/* Iterate each side and calculate the position of it's starting point */
for (let i = 0, sides = 50; i < sides; i ++) {
const angle = (i / sides) * 2 * Math.PI;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
points.push({ x, y });
ctx.lineTo(x, y);
}
/* Complete path and render as stroke */
ctx.closePath();
ctx.stroke();
console.log(points);
arc devrait appeler ellipse en interne ... Et cela ne répond pas à la question, seulement son titre.
@Kaiido merci pour les commentaires - mis à jour ma réponse pour mieux correspondre au corps de la question plutôt qu'au titre :)
Avez-vous regardé ceci Réponse Peut-être que cela pourrait vous conduire dans la direction que vous voulez?