Als die Idee, dass JS durch mein Gehirn ging, fand ich es interessant, also praktizierte ich es. JS -Zeichnungen sind eine Reihe von Artikeln, die ursprünglich um Punkte, Linien und Oberflächen handeln.
Schauen wir uns zuerst das Beispiel an: http://www.zhaojz.com.cn/demo/draw5.html
ein wenig
Wir verwenden das Span -Tag, um hier den Punkt anzugeben
Die Codekopie lautet wie folgt:
// scannen Sie den Punkt, die Größe, Farbe, Koordinaten und Beschriftungen des Punktes; Es ist offensichtlich, dass der OPTS -Parameter ein Objekt ist
Funktion Drawpoint (opts) {
document.write ("<span id = '"+opts.point [0]+""+opts.point [1]+"' style = 'display: inline-block; width:"+opts.pw+"px; Höhe:"+opts.ph+"px; Hintergrundfarbe:"+opts.col; "+opts.point [1]+" px; '> "+(opts.point [2]? (" <div style =' Position: relativ; '> <span style =' Position: absolut; links: 5px; boden: 1px; text-align: links; Breite: 100px; '> "+opts.point [2]+");
}
Mehrere Parameter:
opts.pw: Die Breite des Punktes
opts.ph: Die Höhe des Punktes entspricht im Allgemeinen opts.pw
OPTS.Color: Die Farbe der Punkte
optts
Hinweis: Das Positionsattribut muss absolut sein;
2. Gerade Linie
Eine gerade Linie besteht aus Punkten, daher müssen wir mehr als Npunkte zwischen zwei Punkten ziehen. Visuell ist es eine gerade Linie.
Die Codekopie lautet wie folgt:
// Linien zeichnen
// Pstart -Startpunkt
// Endpunkt pendieren
// Parameter optes
Funktion DRAGLINE (pstart, pend, opts) {
var ph = 1;
var pw = 1;
var color = "darkred";
if (opts) {
color = optts.color? opts.Color: Farbe;
}
var Neigung; //Neigung
var noSlope = false; // gibt es einen Hang
var hdist = pend [0] - pstart [0];
var vdist = pend [1] - pstart [1];
if (hdist! = 0) {
Slope = Math.Abs (VDIST/HDIST); // die Steigung berechnen
}anders{
noslope = true; // Wenn HDist = 0, hat die gerade Linie keine Steigung
}
var gapp = pw> pH? PH: PW; // Der Abstand zwischen den benachbarten Standardpunkten (Pixelpunkte in der oberen linken Ecke)
var diagonal = math.sqrt (math.pow (hdist, 2) + math.pow (vdist, 2)); // die Länge der Hypotenuse
var pn = parsesint (diagonal/gapp); // Berechnen Sie die Anzahl der Punkte zwischen zwei Punkten
if (pn <3) {pn = pn*3+1}; // Wenn die Anzahl der Punkte weniger als 3 beträgt, erhöhen Sie die Anzahl der Punkte. Warum +1, soll sicherstellen, dass es mindestens einen Punkt gibt, wenn PN = 0
var vgap = math.abs (vdist)/pn; // der vertikale Abstand zwischen zwei benachbarten Punkten
var hgap = math.abs (hdist)/pn; // Horizontaler Abstand zwischen zwei benachbarten Punkten
für (var i = 0; i <pn; i ++) {
// Punkte zeichnen
// HGAP horizontaler Abstand zwischen zwei benachbarten Punkten
// VGAP vertikaler Abstand zwischen zwei benachbarten Punkten
// hgap*i*(pend [0] <pstart [0]?-1: 1)*(NoSlope? 0: 1) Horizontaler Versatz vom Startpunkt vom Startpunkt
// VGAP*I*(Pend [1] <pstart [1]?-1: 1) Vertikaler Versatz vom Startpunkt aus dem Startpunkt
// (Pend [0] <pstart [0]?-1: 1) Horizontale Offset-Richtung
// (Pend [1] <pstart [1]?-1: 1) vertikale Offset-Richtung
// (NoSlope? 0: 1) Wenn die gerade Linie keine Steigung hat, beträgt der horizontale Offset 0
Drawpoint ({{
PW: PW,
PH: PH,
Farbe: Farbe,
Punkt: [(hgap*i*(pend [0] <pstart [0]?-1: 1)*(NoSlope? 0: 1)+pstart [0]), (vgap*i*(pend [1] <pstart [1]?-1: 1)+pstart [1])]
});
}
}
Sie können Polylines und Oberflächen basierend auf dem Online -Anschluss zeichnen:
Polylinie:
Die Codekopie lautet wie folgt:
// Polyline
// ps eindimensionale Array von Punkten
Funktion Drawpolyline (ps) {
if (ps) {
// Linien zeichnen
für (var i = 0; i <psgth-1; i ++) {
Drawline (PS [i], PS [i+1]);
}
// den Wendepunkt drehen
für (var i = 0; i <pslength; i ++) {
Drawpoint ({{
PW: 3,
PH: 3,
Farbe: 'Rot',
Punkt: PS [i]
});
}
}
}
Polygone:
Die Codekopie lautet wie folgt:
// Polygon
// ps eindimensionale Array von Punkten
Funktion drawpolygon (ps) {
if (ps) {
// Linien zeichnen
für (var i = 0; i <psgth-1; i ++) {
Drawline (PS [i], PS [i+1]);
}
// Schloss ändern
if (ps.Length> 2) {
Drawline (PS [Ps.Length-1], PS [0])
}
// den Wendepunkt drehen
für (var i = 0; i <pslength; i ++) {
Drawpoint ({{
PW: 3,
PH: 3,
Farbe: 'Rot',
Punkt: PS [i]
});
}
}
}
Rechteck:
Die Codekopie lautet wie folgt:
// ein Rechteck zeichne
// links die Position des Punktes in der oberen linken Ecke
//Breite
//hoch
Funktion DrawRectangle (links, Breite, hoch) {
Drawpolygon ([[
links,
[links [0], links [1]+hoch],
[links [0]+Breite, links [1]+hoch],
[links [0]+Breite, links [1]]
]);
//Füllung
//document.write("<span style = 'Höhe: "+(High-1)+" px; width: "+(width-1)+" px; Hintergrundfarbe: "+" grün "+";
}
Es stellt sich heraus, dass JS so coole Dinge tun kann, es muss wirklich sorgfältig untersucht werden