Quando a idéia do desenho do JS passou pelo meu cérebro, senti que era interessante, então pratiquei. Os desenhos do JS são uma série de artigos, que são originalmente sobre pontos, linhas e superfícies.
Vejamos o exemplo primeiro: http://www.zhaojz.com.cn/demo/draw5.html
um pouco
Usamos a tag span para indicar o ponto aqui
A cópia do código é a seguinte:
// Digitalize o ponto, o tamanho, a cor, as coordenadas e os rótulos do ponto; É óbvio que o parâmetro de opts é um objeto
função drawpoint (opts) {
document.write ("<span id = '"+opts.point [0]+""+opts.point [1]+"' 'style =' Display: Block inline; largura:"+opts.pw+"px; altura:"+opts.ph+"px; background-color:"+opts.color+"; tops: absoluta" "+opts.point.point. "+opts.point [1]+" px; '> "+(opts.point [2]? (" <Div style =' Posição: relativa; '> <span style =' posição: absoluto; esquerda: 5px; inferior: 1px; text-align: esquerda; largura: 100px; '> "+opts.point;
}
Vários parâmetros:
opts.pw: a largura do ponto
opts.ph: a altura do ponto é geralmente igual a opts.pw
opts.color: a cor dos pontos
Opt.Point: indica a posição do ponto, ponto [0]: posição horizontal, ponto [1]: o ponto de posição vertical [2] é o rótulo do ponto
Nota: o atributo de posição deve ser absoluto;
2. Linha reta
Uma linha reta é composta por pontos, então precisamos desenhar mais de n pontos entre dois pontos. Visualmente, é uma linha reta.
A cópia do código é a seguinte:
// Desenhe linhas
// ponto de partida pstart
// Pend End Point
// Opta parâmetros
Função DrawLine (Pstart, Pend, Opts) {
var ph = 1;
var pw = 1;
var color = "Darkred";
if (opts) {
cor = opts.color? opts.color: cor;
}
vara de var; //declive
var noslope = false; // existe uma inclinação
var hdist = pend [0] - pstart [0];
var vdist = pend [1] - pstart [1];
if (hdist! = 0) {
slope = math.abs (vdist/hdist); // Calcule a inclinação
}outro{
Noslope = true; // Quando hdist = 0, a linha reta não tem inclinação
}
var gapp = pw> pH? ph: pw; // A distância entre os pontos adjacentes padrão (pontos de pixel no canto superior esquerdo)
var diagonal = math.sqrt (math.pow (hdist, 2) + math.pow (vdist, 2)); // o comprimento da hipotenusa
var pn = parseint (diagonal/gapp); // Calcule o número de pontos entre dois pontos
if (pn <3) {pn = pn*3+1}; // Se o número de pontos for menor que 3, aumente o número de pontos; Por que +1, é garantir que haja pelo menos um ponto em que pn = 0
var VGAP = Math.abs (VDIST)/PN; // A distância vertical entre dois pontos adjacentes
var hGAP = math.abs (hdist)/pn; // distância horizontal entre dois pontos adjacentes
for (var i = 0; i <pn; i ++) {
// Desenhe pontos
// HGAP Distância horizontal entre dois pontos adjacentes
// VGAP Distância vertical entre dois pontos adjacentes
// hgap*i*(pend [0] <Pstart [0]?-1: 1)*(Noslope? 0: 1) Dessefiação horizontal do ponto de partida
// VGAP*i*(pend [1] <pstart [1]?-1: 1) O deslocamento vertical do ponto de partida
// (Pend [0] <Pstart [0]?-1: 1) Direção de deslocamento horizontal
// (pend [1] <Pstart [1]?-1: 1) Direção de deslocamento vertical
// (Noslope? 0: 1) Quando a linha reta não tem inclinação, o deslocamento horizontal é 0
drawpoint ({
PW: PW,
ph: ph,
Cor: cor,
Ponto: [(HGAP*i*(pend [0] <Pstart [0]?-1: 1)*(Noslope? 0: 1)+pstart [0]), (vGap*i*(pend [1] <pstart [1]?-1: 1)+pstart [1]]]
});
}
}
Você pode desenhar polilinhas e superfícies com base no online:
Polyline:
A cópia do código é a seguinte:
// Polyline
// PS
função drawpolyline (ps) {
if (ps) {
// Desenhe linhas
for (var i = 0; i <ps.length-1; i ++) {
drawline (ps [i], ps [i+1]);
}
// virar o ponto de virada
for (var i = 0; i <ps.length; i ++) {
drawpoint ({
PW: 3,
Ph: 3,
Cor: 'Vermelho',
Ponto: ps [i]
});
}
}
}
Polígonos:
A cópia do código é a seguinte:
//Polígono
// PS
função drawpolygon (ps) {
if (ps) {
// Desenhe linhas
for (var i = 0; i <ps.length-1; i ++) {
drawline (ps [i], ps [i+1]);
}
// alteração fechada
if (ps.Length> 2) {
Drawline (ps [ps.length-1], ps [0])
}
// virar o ponto de virada
for (var i = 0; i <ps.length; i ++) {
drawpoint ({
PW: 3,
Ph: 3,
Cor: 'Vermelho',
Ponto: ps [i]
});
}
}
}
retângulo:
A cópia do código é a seguinte:
// Desenhe um retângulo
// esquerda na posição do ponto no canto superior esquerdo
//largura
//alto
função drawrecrectangle (lefttop, largura, alta) {
drawpoligon ([
Lefttop,
[LeftTop [0], LeftTop [1]+High],
[LeftTop [0]+Width, LeftTop [1]+High],
[LeftTop [0]+Width, LeftTop [1]]
]);
//enchimento
//document.write("< <<span style = 'altura: "+(alta-1)+" px; largura: "+(largura-1)+" px; cor de fundo: "+" verde "+"; posição: absoluto; esquerda: "+(lesfttop [0] +1)+" px; topo: "+(esquerda [1];
}
Acontece que o JS pode fazer coisas tão legais, ele realmente precisa ser estudado com cuidado