Cuando la idea del dibujo JS pasó por mi cerebro, sentí que era interesante, así que la practicé. Los dibujos JS son una serie de artículos, que originalmente son sobre puntos, líneas y superficies.
Veamos el ejemplo primero: http://www.zhaojz.com.cn/demo/draw5.html
un poco
Usamos la etiqueta SPAN para indicar el punto aquí
La copia del código es la siguiente:
// escanear el punto, el tamaño, el color, las coordenadas y las etiquetas del punto; Es obvio que el parámetro OPTS es un objeto
function dayspoint (opts) {
document.write ("<span id = '"+opts.point [0]+""+opts.point [1]+"' style = 'Display: inline-block; ancho:"+opts.pw+"px; altura:"+opts.ph+"px; background-color:"+opts.color+"; posición: absoluto"+opts.point [0]+"px; top: top:"+opts.color+"; posición: absoluta"+opts.point [0]+"px; top: top:" "+opts.point [1]+" px; '> "+(opts.point [2]? (" <Div style =' Position: relative; '> <span style =' Position: Absolute; Left: 5px; Bottom: 1px; Text-Align: Left; Width: 100px; '> "+Opts.Point [2]+" </span> </pan> "):") ")
}
Varios parámetros:
opts.pw: el ancho del punto
opts.ph: La altura del punto es generalmente igual a Opts.pw
opts.color: el color de los puntos
Opts.Point: indica la posición del punto, punto [0]: posición horizontal, punto [1]: el punto de posición vertical [2] es la etiqueta del punto
Nota: El atributo de posición debe ser absoluto;
2. Línea recta
Una línea recta se compone de puntos, por lo que necesitamos dibujar más de n puntos entre dos puntos. Visualmente, es una línea recta.
La copia del código es la siguiente:
// dibujar líneas
// punto de partida de PSTART
// Pend Point Point
// Opta parámetros
Función Drawline (PStart, Pend, Opts) {
var pH = 1;
var pw = 1;
var color = "oscuro";
if (opts) {
color = opts.color? opts.color: color;
}
pendiente var; //pendiente
var noslope = false; // ¿Hay una pendiente?
var hdist = pend [0] - pStart [0];
var vdist = pend [1] - PStart [1];
if (hdist! = 0) {
pendiente = math.abs (VDIST/HDIST); // Calcular la pendiente
}demás{
Noslope = verdadero; // Cuando hdist = 0, la línea recta no tiene pendiente
}
var gapp = pw> ph? ph: PW; // La distancia entre los puntos adyacentes predeterminados (puntos de píxeles en la esquina superior izquierda)
var diagonal = math.sqrt (math.pow (hdist, 2) + math.pow (vdist, 2)); // La longitud del hipotenuso
var pn = parseint (diagonal/gapp); // Calcule el número de puntos entre dos puntos
if (pn <3) {pn = pn*3+1}; // Si el número de puntos es inferior a 3, aumente el número de puntos; Por qué +1 es asegurar que haya al menos un punto cuando PN = 0
var vgap = math.abs (vdist)/pn; // La distancia vertical entre dos puntos adyacentes
var hgap = math.abs (hdist)/pn; // distancia horizontal entre dos puntos adyacentes
para (var i = 0; i <pn; i ++) {
// dibujar puntos
// Distancia horizontal HGAP entre dos puntos adyacentes
// Distancia vertical VGAP entre dos puntos adyacentes
// HGAP*I*(Pend [0] <PStart [0]?-1: 1)*(Noslope? 0: 1) Offset horizontal desde el punto de partida
// vgap*i*(Pend [1] <pStart [1]?-1: 1) Offset vertical desde el punto de partida
// (Pend [0] <PStart [0]?-1: 1) Dirección de compensación horizontal
// (Pend [1] <pStart [1]?-1: 1) Dirección de compensación vertical
// (Noslope? 0: 1) Cuando la línea recta no tiene pendiente, el desplazamiento horizontal es 0
punto de desplazamiento ({
PW: PW,
ph: ph,
Color: color,
Punto: [(HGAP*I*(Pend [0] <PStart [0]?-1: 1)*(Noslope? 0: 1)+PStart [0]), (VGAP*I*(Pend [1] <PStart [1]?-1: 1)+PStart [1])]
});
}
}
Puede dibujar polilíneas y superficies basadas en en línea:
Polilínea:
La copia del código es la siguiente:
// polilínea
// PS Matriz de puntos unidimensionales
function DrawPolyline (PS) {
if (ps) {
// dibujar líneas
para (var i = 0; i <ps.length-1; i ++) {
línea de dibujo (ps [i], ps [i+1]);
}
// girar el punto de inflexión
para (var i = 0; i <ps.length; i ++) {
punto de desplazamiento ({
PW: 3,
ph: 3,
Color: 'rojo',
Punto: PS [i]
});
}
}
}
Polígonos:
La copia del código es la siguiente:
//Polígono
// PS Matriz de puntos unidimensionales
función DrawPolygon (PS) {
if (ps) {
// dibujar líneas
para (var i = 0; i <ps.length-1; i ++) {
línea de dibujo (ps [i], ps [i+1]);
}
// Cambio cerrado
if (ps.length> 2) {
Drawline (PS [Ps.Length-1], PS [0])
}
// girar el punto de inflexión
para (var i = 0; i <ps.length; i ++) {
punto de desplazamiento ({
PW: 3,
ph: 3,
Color: 'rojo',
Punto: PS [i]
});
}
}
}
rectángulo:
La copia del código es la siguiente:
// dibujar un rectángulo
// Left -tope la posición del punto en la esquina superior izquierda
//ancho
//alto
function drawRectangle (LeftTop, Ancho, High) {
Drawpolygon ([
Lefttop,
[Lefttop [0], Lefttop [1]+alto],
[Lefttop [0]+ancho, Lefttop [1]+alto],
[Lefttop [0]+ancho, Lefttop [1]]
]);
//relleno
//document.write("<Span style = 'Height: "+(High-1)+" Px; Width: "+(Width-1)+" Px; Background-Color: "+" Green "+"; Position: Absolute; Left: "+(LeftTop [0] +1)+" Px; Top: "+(LeftTop [1] +1)+"> </span> ");
}
Resulta que JS puede hacer cosas tan geniales, realmente necesita ser estudiada con cuidado