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

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn