Ketika ide gambar JS melewati otak saya, saya merasa itu menarik, jadi saya berlatih. Gambar JS adalah serangkaian artikel, yang awalnya tentang titik, garis, dan permukaan.
Mari kita lihat contoh terlebih dahulu: http://www.zhaojz.com.cn/demo/draw5.html
sedikit
Kami menggunakan tag span untuk menunjukkan intinya di sini
Salinan kode adalah sebagai berikut:
// Pindai titik, ukuran, warna, koordinat dan label titik; jelas bahwa parameter opts adalah objek
function drawpoint (opts) {
document.write ("<span id = '"+opts.point [0]+""+opts.point [1]+"' style = 'display: inline-block; lebar:"+opts.pw+"px; tinggi:"+opts.ph+"px; latar belakang-color:"+opts.color+"; posisi: absolute"+optspoint [0] "+opts.point [1]+" px; '> "+(opts.point [2]? (" <div style =' posisi: relatif; '> <span style =' posisi: absolute; kiri: 5px; bawah: 1px; teks-segion: kiri; lebar: 100px; '> ""+opts.point [2]+"</span> </Div;
}
Beberapa parameter:
opts.pw: lebar titik
opts.ph: ketinggian titik umumnya sama dengan opts.pw
opts.color: Warna titik -titik
Opts.Point: Menunjukkan posisi titik, titik [0]: Posisi horizontal, titik [1]: Titik posisi vertikal [2] adalah label titik tersebut
Catatan: Atribut posisi harus absolut;
2. Garis lurus
Garis lurus terdiri dari poin, jadi kita perlu menarik lebih dari n poin antara dua poin. Secara visual, ini adalah garis lurus.
Salinan kode adalah sebagai berikut:
// Gambarlah garis
// titik awal PSTart
// titik akhir
// Parameter Opts
Function Drawline (PSTART, PEND, OPTS) {
var pH = 1;
var pw = 1;
var color = "darkred";
if (opts) {
warna = opts.color? opts.color: warna;
}
var slope; //lereng
var noslope = false; // Apakah ada kemiringan
var hdist = pend [0] - pStart [0];
var vdist = pend [1] - pStart [1];
if (hdist! = 0) {
slope = math.abs (vdist/hdist); // Hitung lereng
}kalau tidak{
noslope = true; // Saat HDIST = 0, garis lurus tidak memiliki kemiringan
}
var gapp = pw> ph? PH: PW; // Jarak antara titik -titik yang berdekatan (titik piksel di sudut kiri atas)
var diagonal = math.sqrt (math.pow (hdist, 2) + math.pow (vdist, 2)); // panjang hipotenus
var pn = parseInt (diagonal/gapp); // Hitung jumlah poin antara dua poin
if (pn <3) {pn = pn*3+1}; // Jika jumlah poin kurang dari 3, tingkatkan jumlah poin; Mengapa +1, adalah untuk memastikan bahwa setidaknya ada satu titik ketika PN = 0
var vgap = math.abs (vdist)/pn; // Jarak vertikal antara dua titik yang berdekatan
var hgap = math.abs (hdist)/pn; // jarak horizontal antara dua titik yang berdekatan
untuk (var i = 0; i <pn; i ++) {
// menggambar poin
// jarak horizontal HGAP antara dua titik yang berdekatan
// jarak vertikal VGAP antara dua titik yang berdekatan
// hgap*i*(Pend [0] <pStart [0]?-1: 1)*(noslope? 0: 1) offset horizontal dari titik awal
// VGAP*i*(PEND [1] <PSTART [1]?-1: 1) Offset vertikal dari titik awal
// (Pend [0] <Pstart [0]?-1: 1) Arah offset horizontal
// (Pend [1] <Pstart [1]?-1: 1) Arah offset vertikal
// (noslope? 0: 1) Ketika garis lurus tidak memiliki kemiringan, offset horizontal adalah 0
drawpoint ({
PW: PW,
PH: Ph,
Warna: Warna,
Poin: [(hgap*i*(Pend [0] <Pstart [0]?-1: 1)*(noslope? 0: 1)+PSTart [0]), (VGAP*i*(Pend [1] <PSTart [1]?-1: 1)+PSTart [1]]]
});
}
}
Anda dapat menggambar polyline dan permukaan berdasarkan online:
POLYLINE:
Salinan kode adalah sebagai berikut:
// Polyline
// PS array satu dimensi poin
fungsi drawpolyline (ps) {
if (ps) {
// Gambarlah garis
untuk (var i = 0; i <ps.length-1; i ++) {
drawline (ps [i], ps [i+1]);
}
// putar titik baliknya
untuk (var i = 0; i <ps.length; i ++) {
drawpoint ({
PW: 3,
Ph: 3,
Warna: 'merah',
Poin: PS [i]
});
}
}
}
Poligon:
Salinan kode adalah sebagai berikut:
//Poligon
// PS array satu dimensi poin
fungsi drawpolygon (ps) {
if (ps) {
// Gambarlah garis
untuk (var i = 0; i <ps.length-1; i ++) {
drawline (ps [i], ps [i+1]);
}
// Ubah ditutup
if (ps.length> 2) {
Drawline (ps [ps.length-1], ps [0])
}
// putar titik baliknya
untuk (var i = 0; i <ps.length; i ++) {
drawpoint ({
PW: 3,
Ph: 3,
Warna: 'merah',
Poin: PS [i]
});
}
}
}
persegi panjang:
Salinan kode adalah sebagai berikut:
// Gambar persegi panjang
// Lefttop Posisi titik di sudut kiri atas
//lebar
//tinggi
fungsi drawrectangle (lefttop, lebar, tinggi) {
drawpolygon ([
Lefttop,
[Lefttop [0], lefttop [1]+tinggi],
[Lefttop [0]+Lebar, Lefttop [1]+Tinggi],
[Lefttop [0]+Lebar, Lefttop [1]]
]);
//isian
//document.write(" <span style = 'height: "+(high-1)+" px; lebar: "+(lebar-1)+" px; latar belakang-warna: "+" hijau "+"; posisi: absolute; kiri: "+(lefttop [0] +1)+" px; top: "+(leftop [1] +1) +1 +1)+");
}
Ternyata JS dapat melakukan hal -hal keren, itu benar -benar perlu dipelajari dengan cermat