Utiliser JS pour dessiner des points, des lignes et des surfaces

Utiliser JS pour dessiner des points, des lignes et des surfaces_javascript

WBOY

Libérer： 2016-05-16 16:20:55

original

1483 Les gens l'ont consulté

Quand l'idée du dessin JS m'est venue à l'esprit, j'ai trouvé cela intéressant, alors je l'ai mis en pratique. Le dessin JS est une série d'articles, à l'origine sur les points, les lignes et les surfaces

Regardez d'abord l'échantillon : http://www.zhaojz.com.cn/demo/draw5.html

1.Point

Nous utilisons la balise span pour représenter les points ici

Copier le code Le code est le suivant :

//Dessinez des points, les paramètres sont la taille, la couleur, les coordonnées et l'étiquette du point ; évidemment le paramètre opts est un objet 

fonction drawPoint(opts){

document.write("" (opts.point[2 ]?("" opte .point[2] "
"):"") "");

>

Plusieurs paramètres :

opts.pw : largeur du point

opts.ph : La hauteur du point, généralement égale à opts.pw

opts.color : couleur du point

　opts.point : représente la position du point, point[0] : position horizontale, point[1] : position verticale point[2] est l'étiquette du point

Remarque : L'attribut de position doit être absolu ;

2. Ligne droite

Une ligne droite est composée de points, il faut donc tracer n points entre deux points. Visuellement, c'est une ligne droite.

Copier le code Le code est le suivant :

//Tracer une ligne

//pstart point de départ

//pendre le point final

//opte les paramètres

fonction drawLine (pstart, pend, opts){

var ph = 1;

var pw = 1;

var color = "Rouge Foncé";

Si (opte){

         couleur = opts.color ? opts.color: couleur;

>

var pente; //Pente

var noSlope = false; //Y a-t-il une pente

var hdist = pend[0] - pstart[0];

var vdist = pend[1] - pstart[1];

Si(hdist != 0){

        pente = Math.abs(vdist/hdist); //Calculer la pente

}autre{

         noSlope = true; //Lorsque hdist=0, la ligne droite n'a pas de pente

>

var gapp = pw > ph ? ph : pw; //Distance par défaut entre les points adjacents (pixels dans le coin supérieur gauche) 

var diagonal = Math.sqrt(Math.pow(hdist,2) Math.pow(vdist,2)); //Longueur de l'hypoténuse

var pn = parseInt(diagonal/gapp); //Calculer le nombre de points entre deux points

If(pn < 3){pn=pn*3 1}; //Si le nombre de points est inférieur à 3, augmentez le nombre de points ; pourquoi 1, c'est pour s'assurer qu'il y a au moins un point 
 quand pn=0
var vgap = Math.abs(vdist)/pn; //Distance verticale entre deux points adjacents

var hgap = Math.abs(hdist)/pn; //Distance horizontale entre deux points adjacents

pour(var je = 0; je< pn ; je ){

​​​​ //hgap La distance horizontale entre deux points adjacents

​​​​ //vgap La distance verticale entre deux points adjacents

​​​​ //hgap*i*(pend[0]
​​​​ //vgap*i*(pend[1]
//(pend[0]
//(pend[1]
​​​​ //(noSlope?0:1) Lorsque la ligne droite n'a pas de pente, le décalage horizontal est 0

        drawPoint({

             pw : pw,

tél : tél,

             couleur : couleur,

point : [(hgap*i*(pend[0]
        });

>

>

Les polylignes et les surfaces peuvent être dessinées à partir de lignes :

Polyligne :

Copier le code Le code est le suivant :

//Polyligne
//ps tableau unidimensionnel de points
fonction drawPolyline(ps){
Si(ps){
//Trace une ligne
pour(var je = 0; je              drawLine(ps[i], ps[i 1]);
>
//Dessine le point d'inflexion
pour(var je = 0; je              drawPoint({
                 mot de passe : 3,
tél : 3,
                  couleur : 'ROUGE',
Point : ps[i]
            });
>

>
>

Polygone :

Copier le code Le code est le suivant :

//Polygone

//ps tableau unidimensionnel de points

fonction drawPolygon(ps){

Si(ps){

//Trace une ligne

pour(var je = 0; je
             drawLine(ps[i], ps[i 1]);

>

​​​​ //Fermer

Si (ps.length > 2) {

             drawLine(ps[ps.length-1], ps[0])

>

​​​​ //Dessine le point d'inflexion

pour(var je = 0; je
             drawPoint({

                 mot de passe : 3,

tél : 3,

                  couleur : 'ROUGE',

Point : ps[i]

            });

>

>

>

Rectangle :

Copier le code Le code est le suivant :

//Dessine un rectangle

//leftTop La position du point du coin supérieur gauche

//largeur largeur

//haut haut

fonction drawRectangle(leftTop, width, high){

drawPolygon([

          leftTop,

         [leftTop[0], leftTop[1] haut],

         [largeur leftTop[0], hauteur leftTop[1]],

[leftTop[0] largeur, leftTop[1]]

]);

//Rembourrage

//document.write("");

>

Il s'avère que JS peut aussi faire des choses tellement sympas, j'ai vraiment besoin de l'étudier attentivement