Lorsque l'idée du dessin JS a traversé mon cerveau, je sentais que c'était intéressant, alors je l'ai pratiqué. Les dessins JS sont une série d'articles, qui concernent à l'origine des points, des lignes et des surfaces.
Voyons d'abord l'exemple: http://www.zhaojz.com.cn/demo/draw5.html
un peu
Nous utilisons la balise Span pour indiquer le point ici
La copie de code est la suivante:
// scanne le point, la taille, la couleur, les coordonnées et les étiquettes du point; Il est évident que le paramètre Opts est un objet
Fonction Drawpoint (Opts) {
Document.Write ("<span id = '" + opts.point [0] + "" + opts.point [1] + "' style = 'affiche: block en ligne; width:" + opts.pw + "px; height:" + opts.ph + "px; background-Color:" + opts.color + "; position: absolu" + opts.point [0] + "px; "+ opts.point [1] +" px; '> "+ (opts.point [2]? (" <div style =' position: relative; '> <span style =' position: absolu; gauche: 5px; en bas: 1px; text-adign: gauche; width: 100px; '> "+ opts.pex [2] +" </pander> </vr> "):") ");
}
Plusieurs paramètres:
opts.pw: la largeur du point
opts.ph: la hauteur du point est généralement égale à Opts.pw
opts.color: la couleur des points
opts.point: indique la position du point, point [0]: position horizontale, point [1]: point de position vertical [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, nous devons donc tirer plus de n points entre deux points. Visuellement, c'est une ligne droite.
La copie de code est la suivante:
// dessine des lignes
// point de départ pstart
// Pend Point
// opte les paramètres
Fonction Drawline (Pstart, Pend, opts) {
var pH = 1;
var pw = 1;
var color = "darkred";
if (opts) {
color = opts.color? opts.color: couleur;
}
pente var; //pente
var noslope = false; // y a-t-il une pente
var hdist = pennd [0] - pStart [0];
var vdist = pennd [1] - pstart [1];
if (hdist! = 0) {
slope = math.abs (vDist / hdist); // Calculez la pente
}autre{
Noslope = true; // Lorsque HDIST = 0, la ligne droite n'a pas de pente
}
var gapp = pw> pH? PH: PW; // la distance entre les points adjacents par défaut (points de pixel dans le coin supérieur gauche)
var diagonal = math.sqrt (math.pow (hdist, 2) + math.pow (vdist, 2)); // la longueur de l'hypoténuse
var pn = parseInt (diagonal / gapp); // Calculez 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 s'assurer qu'il y a au moins un point où pn = 0
var vgap = math.abs (vdist) / pn; // la distance verticale entre deux points adjacents
var hgap = math.abs (hdist) / pn; // Distance horizontale entre deux points adjacents
pour (var i = 0; i <pn; i ++) {
// dessiner des points
// Distance horizontale HGAP entre deux points adjacents
// Distance verticale VGAP entre deux points adjacents
// hgap * i * (Pend [0] <pStart [0]? - 1: 1) * (Noslope? 0: 1) Offset horizontal du point de départ
// vgap * i * (Pend [1] <pstart [1]? - 1: 1) décalage vertical du point de départ
// (Pend [0] <pstart [0]? - 1: 1) Direction de décalage horizontal
// (Pend [1] <pstart [1]? - 1: 1) Direction de décalage vertical
// (Noslope? 0: 1) Lorsque la ligne droite n'a pas de pente, le décalage horizontal est 0
Dirtpoint ({
PW: PW,
PH: PH,
Couleur: couleur,
Point: [(hgap * i * (pennd [0] <pstart [0]? - 1: 1) * (Noslope? 0: 1) + pstart [0]), (vgap * i * (Pend [1] <pstart [1]? - 1: 1) + pstart [1])]
});
}
}
Vous pouvez dessiner des polylines et des surfaces en fonction de la ligne:
Polyline:
La copie de code est la suivante:
// Polyline
// PS Tableau unidimensionnel de points
fonction drawpolyline (ps) {
if (ps) {
// dessine des lignes
pour (var i = 0; i <ps.length-1; i ++) {
drawline (ps [i], ps [i + 1]);
}
// tourne le tournant
pour (var i = 0; i <ps.length; i ++) {
Dirtpoint ({
PW: 3,
Ph: 3,
couleur: «rouge»,
point: ps [i]
});
}
}
}
Polygones:
La copie de code est la suivante:
//Polygone
// PS Tableau unidimensionnel de points
fonction drawpolygon (ps) {
if (ps) {
// dessine des lignes
pour (var i = 0; i <ps.length-1; i ++) {
drawline (ps [i], ps [i + 1]);
}
// Changement fermé
if (ps.length> 2) {
Drawline (ps [ps.length-1], ps [0])
}
// tourne le tournant
pour (var i = 0; i <ps.length; i ++) {
Dirtpoint ({
PW: 3,
Ph: 3,
couleur: «rouge»,
point: ps [i]
});
}
}
}
rectangle:
La copie de code est la suivante:
// dessine un rectangle
// gauche la position du point dans le coin supérieur gauche
//largeur
//haut
fonction drawrectangle (gauche, largeur, haut) {
drawpolygon ([
gauche,
[gauche [0], gauche [1] + high],
[gauche [0] + largeur, gauche [1] + haut],
[gauche [0] + largeur, gauche [1]]
]));
//remplissage
//Document.write("< Span style = 'height: "+ (high-1) +" px; width: "+ (width-1) +" px; background-color: "+" vert "+"; position: absolu; gauche: "+ (gauche [0] +1) +" px; top: "+ (gauche [1] +1) +"' ''> </pan> ");
}
Il s'avère que JS peut faire des choses aussi cool, il doit vraiment être étudié attentivement