Utilisez js pour dessiner des cercles, des arcs et des compétences sector_javascript

La relation entre le point p(x,y) sur le cercle de rayon r et le centre O(x0,y0) : x = x0 rcosA y = y0 rsinA, A est en radians

Exemple : http://www.zhaojz.com.cn/demo/draw6.html

1. Cercle

Copier le code Le code est le suivant :

//Cercle/Ellipse
//point point
//r rayon
//compressionRatio taux de compression vertical
fonction drawCircle(dot, r, compressionRatio, data){
var pstart = [dot[0] r, dot[1]]; //Point de départ
var pré = pstart
pour(var i=0; i < 360; i =5){
rad = i*Math.PI/180; //Calculer les radians
//r*Math.cos(rad) Le décalage horizontal du point final de l'arc par rapport au point
//r*Math.sin(rad) Décalage vertical du point final de l'arc par rapport au point
//compressionRatio taux de compression vertical
         var cur = [r*Math.cos(rad) dot[0], compressionRatio*r*Math.sin(rad) dot[1]];
        drawLine(pre,cur);
          pre = cur; //Enregistre les coordonnées du point actuel
>
DrawLine(pre,pstart);//Fermer
//Dessine des points
drawPoint({
         pw:2,ph:2,color:'DarkRed',point:dot
});
>

2.Arc

Dessinez simplement une partie du cercle, l'algorithme est similaire au cercle

Copier le code Le code est le suivant :

//Dessiner un arc
//point point
//r rayon
//angle angle au centre
//angleOfSlope et l'angle entre l'axe des x
// pop s'il faut apparaître
//balise de titre
fonction drawArc(dot, r, angle, angleOfSlope, pop, title){
var nouveauDot = [point[0], point[1]];
var a = (angleOfSlope angle/2)*Math.PI/180
If(pop){ //Calculer les nouvelles coordonnées du centre du cercle
nouveauDot[0] = point[0] 10*Math.cos(a);
nouveauDot[1] = point[1] 10*Math.sin(a);
>
Si(!angleOfSlope){
angleOfSlope = 0;
>
var aos = angleOfSlope*Math.PI/180;
var aos2 = (angleangleOfSlope)*Math.PI/180;
var pstart = [newDot[0] r*Math.cos(aos), newDot[1] r*Math.sin(aos)] //Le point de départ de l'arc
var pend = [newDot[0] r*Math.cos(aos2), newDot[1] r*Math.sin(aos2)] //Le point final de l'arc
var pré = pstart;
for(var i=0; i < angle; i =2){ //Dessine un arc dans la plage d'angle
         rad = (i angleOfSlope)*Math.PI/180;
        var cur = [r*Math.cos(rad) newDot[0], r*Math.sin(rad) newDot[1]];
        drawLine(pre,cur);
          pre = cur;
>
>

3. Forme d'éventail

Reliez les deux extrémités de l'arc au centre du cercle

Copier le code Le code est le suivant :

//Secteur
//point point
//r rayon
//angle angle au centre
//L'angleOfSlope et l'axe x déterminent la direction du secteur
// si une pop apparaît, c'est-à-dire si elle s'écarte du centre du cercle
//balise de titre
fonction drawSector(dot, r, angle, angleOfSlope, pop, title){
var nouveauDot = [point[0], point[1]];
var a = (angleOfSlope angle/2)*Math.PI/180
If(pop){ //Calculer les nouvelles coordonnées du centre du cercle
nouveauDot[0] = point[0] 10*Math.cos(a);
nouveauDot[1] = point[1] 10*Math.sin(a);
>
Si(!angleOfSlope){
angleOfSlope = 0;
>
var aos = angleOfSlope*Math.PI/180;
var aos2 = (angleangleOfSlope)*Math.PI/180;
var pstart = [newDot[0] r*Math.cos(aos), newDot[1] r*Math.sin(aos)] //Le point de départ de l'arc
var pend = [newDot[0] r*Math.cos(aos2), newDot[1] r*Math.sin(aos2)] //Le point final de l'arc
drawLine(newDot,pstart); //Connectez le centre du cercle et le point de départ
var pré = pstart;
for(var i=0; i < angle; i =2){ //Dessine un arc dans la plage d'angle
         rad = (i angleOfSlope)*Math.PI/180;
        var cur = [r*Math.cos(rad) newDot[0], r*Math.sin(rad) newDot[1]];
        drawLine(pre,cur);
          pre = cur;
>
drawPolyline([pre, pend, newDot]); //Fermer
//Dessinez le centre du cercle
drawPoint({
         pw:2,ph:2,color:'DarkRed',point:dot
});
// Balise
Si(titre){
document.write("" titre "< ;/span>");
>
>

N'est-ce pas choquant ? Il s'avère que js peut faire des choses tellement cool. . .