HTML 5 Canvas arc() et lineTo() pour dessiner des tabulations autour d'un cercle

Question

J'ai un cercle que j'ai dessiné sur une toile. Je voudrais dessiner des objets semblables à des tabulations entourant ce cercle en utilisant 2 arcs qui sont connectés à chaque extrémité avec une ligne tracée à un certain angle. Malheureusement, puisque la méthode lineTo() accepte uniquement les coordonnées x &, je dois pouvoir traduire où je veux dessiner dans ces termes.

je peux tirer le premier arc, allant du point 4 à 1, mais je ne sais pas comment obtenir les coordonnées x et y de 1, ni comment comprendre ce que x et y coordonnée de 2 devrait être. Une fois que je suis à 2, j'ai juste besoin d'augmenter le rayon pour dessiner l'arc de 2 à 3 (ou 3 à 2), mais alors je devrais savoir comment obtenir les coordonnées x, y de 4 pour que je puisse appelez lineTo() et passez x et y de 4. Je pense que c'est probablement une simple géométrie ou trigonométrie impliquant Math.sin() et Math.cos() mais j'ai du mal à le comprendre.

Answer 1

J'ai utilisé quelque chose comme HTML5 Roulette Wheel.

Cela vous donnera les onglets que vous aimez, et vous pouvez jouer avec l'espacement entre les onglets.

Vous n'aurez pas besoin de lineTo, vous pouvez simplement utiliser le remplissage et le contour de chaque 'onglet' pour créer cet effet.