2010-09-21 22 views
1

J'utilise HTML 5 pour rendre des camemberts elliptiques par section; en utilisant un chemin qui commence du centre, vers le bord, à travers son arc et de retour au centre qui est ensuite rempli.HTML5 - Meilleure façon de rendre un arc elliptique

Si elles étaient parfaitement circulaires, je pourrais utiliser les fonctions de l'arc ou du chemin arcTo, mais comme elles sont elliptiques, les courbes extérieures auront toujours un rayon variable.

Ce sont ces courbes externes que j'essaie de comprendre comment dessiner. Je ne peux pas assez hacker les maths pour savoir si les courbes quadratiques ou bezier sont la réponse mais elles pourraient l'être. Quoi qu'il en soit, le seul moyen que j'ai trouvé pour le faire est de rendre des lignes pour tous les 0,1 degrés autour du bord, ce qui fait des calculs sinus et cos par point et est terriblement inefficace. Il ressemble à ceci (javascript):

while (arcAng <= curAng + dTheta) { 
    this.parent2d.lineTo(this.left + (this.width/2) + (this.width/2) * Math.cos(arcAng * (Math.PI/180)), 
    this.top + (this.height/2) + (this.height/2) * Math.sin(arcAng * (Math.PI/180))); 
    arcAng += 0.1; 
} 

Quelqu'un peut-il me dire la façon la plus efficace de le faire?

+0

duplication possible de [Comment dessiner un ovale en toile html5?] (Http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas) – sje397

+0

Essentiellement la même chose oui, mais avec juste une section d'arc d'une ellipse entre deux points. –

+0

Une courbe elliptique est quelque chose de complètement différent, avec des applications dans la cryptographie à clé publique. – starblue

Répondre

0

Le moyen le plus simple consistait simplement à appliquer une transformation au lot entier.

J'ai utilisé uniquement les propriétés x position et width pour rendre le cercle (comme s'il se trouvait dans un carré parfait) et appliqué la mise à l'échelle x, y (1, height/width).