เมื่อความคิดของการวาดภาพ JS ผ่านสมองของฉันฉันรู้สึกว่ามันน่าสนใจดังนั้นฉันจึงฝึกฝนมัน ภาพวาด JS เป็นชุดของบทความซึ่งเดิมเกี่ยวกับจุดเส้นและพื้นผิว
มาดูตัวอย่างก่อน: http://www.zhaojz.com.cn/demo/draw5.html
เล็กน้อย
เราใช้แท็ก span เพื่อระบุจุดที่นี่
การคัดลอกรหัสมีดังนี้:
// สแกนจุดขนาดสีพิกัดและฉลากของจุด เห็นได้ชัดว่าพารามิเตอร์ OPTS เป็นวัตถุ
ฟังก์ชั่น DrawPoint (opts) {
document.write ("<span id = '"+opts.point [0]+""+opts.point [1]+"' style = 'แสดง: inline-block; ความกว้าง:"+opts.pw+"px; ความสูง:" opts.ph+"px; "+opts.point [1]+" px; '> "+(opts.point [2]? (" <div style =' ตำแหน่ง: ญาติ; '> <span style =' ตำแหน่ง: Absolute; ซ้าย: 5px; Bottom: 1px; text-align: left; width: 100px; '> "+opts.point [2]+"
-
พารามิเตอร์หลายตัว:
opts.pw: ความกว้างของจุด
opts.ph: ความสูงของจุดโดยทั่วไปเท่ากับ opts.pw
Opts.Color: สีของจุด
opts.point: ระบุตำแหน่งของจุดจุด [0]: ตำแหน่งแนวนอน, จุด [1]: จุดตำแหน่งแนวตั้ง [2] คือฉลากของจุด
หมายเหตุ: แอตทริบิวต์ตำแหน่งจะต้องแน่นอน
2. เส้นตรง
เส้นตรงประกอบด้วยจุดดังนั้นเราต้องวาดมากกว่า N คะแนนระหว่างสองจุด สายตามันเป็นเส้นตรง
การคัดลอกรหัสมีดังนี้:
// วาดเส้น
// จุดเริ่มต้นของ PSTART
// จุดสิ้นสุด pend
// opts พารามิเตอร์
ฟังก์ชั่น drawline (pstart, pend, opts) {
var pH = 1;
var pw = 1;
var color = "Darkred";
if (opts) {
color = opts.color? opts.color: สี;
-
ความลาดชัน var; // ความลาดชัน
var noslope = false; // มีความลาดชัน
var hdist = pend [0] - pstart [0];
var vdist = pend [1] - pstart [1];
ถ้า (hdist! = 0) {
slope = math.abs (vdist/hdist); // คำนวณความชัน
}อื่น{
noslope = true; // เมื่อ hdist = 0 เส้นตรงไม่มีความลาดชัน
-
var gapp = pw> pH? Ph: PW; // ระยะห่างระหว่างจุดเริ่มต้นที่อยู่ติดกัน (จุดพิกเซลที่มุมซ้ายบน)
var diagonal = math.sqrt (math.pow (hdist, 2) + math.pow (vdist, 2)); // ความยาวของ hypotenuse
var pn = parseint (เส้นทแยงมุม/gapp); // คำนวณจำนวนคะแนนระหว่างสองจุด
if (pn <3) {pn = pn*3+1}; // หากจำนวนคะแนนน้อยกว่า 3 ให้เพิ่มจำนวนคะแนน ทำไม +1 คือเพื่อให้แน่ใจว่ามีอย่างน้อยหนึ่งจุดเมื่อ pn = 0
var vgap = math.abs (vdist)/pn; // ระยะทางแนวตั้งระหว่างสองจุดที่อยู่ติดกัน
var hgap = math.abs (hdist)/pn; // ระยะทางแนวนอนระหว่างสองจุดที่อยู่ติดกัน
สำหรับ (var i = 0; i <pn; i ++) {
// วาดจุด
// HGAP ระยะทางแนวนอนระหว่างสองจุดที่อยู่ติดกัน
// VGAP ระยะทางแนวตั้งระหว่างสองจุดที่อยู่ติดกัน
// hgap*i*(pend [0] <pstart [0]?-1: 1)*(noslope? 0: 1) ออฟเซ็ตแนวนอนจากจุดเริ่มต้น
// vgap*i*(pend [1] <pstart [1]?-1: 1) ออฟเซ็ตแนวตั้งจากจุดเริ่มต้น
// (pend [0] <pstart [0]?-1: 1) ทิศทางออฟเซ็ตแนวนอน
// (pend [1] <pstart [1]?-1: 1) ทิศทางออฟเซ็ตแนวตั้ง
// (noslope? 0: 1) เมื่อเส้นตรงไม่มีความชันชดเชยแนวนอนคือ 0
drawpoint ({
PW: PW
pH: pH,
สี: สี
จุด: [(hgap*i*(pend [0] <pstart [0]?-1: 1)*(noslope? 0: 1)+pstart [0]), (vgap*i*(pend [1] <pstart [1]?-1: 1)
-
-
-
คุณสามารถวาด polylines และพื้นผิวตามออนไลน์:
โพลีไลน์:
การคัดลอกรหัสมีดังนี้:
// polyline
// ps อาร์เรย์หนึ่งมิติของคะแนน
ฟังก์ชั่น DrawPolyline (PS) {
ถ้า (ps) {
// วาดเส้น
สำหรับ (var i = 0; i <ps.length-1; i ++) {
drawline (ps [i], ps [i+1]);
-
// เปลี่ยนจุดเปลี่ยน
สำหรับ (var i = 0; i <ps.length; i ++) {
drawpoint ({
PW: 3
Ph: 3,
สี: 'สีแดง',
จุด: ps [i]
-
-
-
-
รูปหลายเหลี่ยม:
การคัดลอกรหัสมีดังนี้:
// รูปหลายเหลี่ยม
// ps อาร์เรย์หนึ่งมิติของคะแนน
ฟังก์ชั่น DrawPolygon (PS) {
ถ้า (ps) {
// วาดเส้น
สำหรับ (var i = 0; i <ps.length-1; i ++) {
drawline (ps [i], ps [i+1]);
-
// เปลี่ยนปิด
if (ps.length> 2) {
Drawline (PS [Ps.Length-1], PS [0])
-
// เปลี่ยนจุดเปลี่ยน
สำหรับ (var i = 0; i <ps.length; i ++) {
drawpoint ({
PW: 3
Ph: 3,
สี: 'สีแดง',
จุด: ps [i]
-
-
-
-
สี่เหลี่ยมผืนผ้า:
การคัดลอกรหัสมีดังนี้:
// วาดสี่เหลี่ยมผืนผ้า
// lefttop ตำแหน่งของจุดที่มุมบนซ้าย
//ความกว้าง
//สูง
ฟังก์ชั่น DrawRectangle (ซ้ายท็อป, ความกว้าง, สูง) {
drawpolygon ([
ซ้ายท็อป
[ซ้ายท็อป [0], ซ้ายท็อป [1]+สูง]
[ซ้ายท็อป [0]+ความกว้าง, ซ้ายท็อป [1]+สูง],
[ซ้ายท็อป [0]+ความกว้าง, ซ้ายท็อป [1]]
-
// เติม
//document.write("< <span style = 'ความสูง: "+(high-1)+" px; ความกว้าง: "+(width-1)+" px; พื้นหลัง-สี: "+" สีเขียว "+"; ตำแหน่ง: สัมบูรณ์; ซ้าย: "+(ซ้าย" [0] +1)+"px;
-
ปรากฎว่า JS สามารถทำสิ่งที่ยอดเยี่ยมเช่นนี้มันจำเป็นต้องได้รับการศึกษาอย่างระมัดระวัง