มาเรียนรู้วิธีวาดจุดใน JavaScript ในเบราว์เซอร์กัน.. ไม่ยากในทางเทคนิค แต่สำหรับผู้ที่ซุ่มซ่ามและสำหรับผู้ที่ไม่ได้เตรียมที่จะวาดจุดบนอินเทอร์เน็ต - แน่นอนว่านี่คือความสำเร็จทั้งหมด
การวาดจุดมีหลายวิธี มาดูกันเลย
การใช้ Unity/Godot/microStudio หรือโปรแกรมสร้างเกมนับพัน ๆ ตัว.. พวกเขาทั้งหมดจะสร้างโค้ดไม่ทางใดก็ทางหนึ่งซึ่งจะเป็น JavaScript หรือ Webassembly และยังคงแสดงให้เราเห็นถึงประเด็นนี้เราไม่สนใจเส้นทางนี้เราจะไม่เข้าใจจริงๆ ว่าเกิดอะไรขึ้น การควบคุมโค้ดจะน้อยที่สุดและไม่สามารถอ่านได้ในซอร์สโค้ด นอกจากจะมีขนาดใหญ่มากแล้ว
เส้นทางของเจไดนี้อยู่ใกล้ตัวเรามากที่สุดเพราะรหัสของเราจะไม่ใหญ่และชัดเจนเหมือนวัน เราจะไม่ย่อมาก เราจะไม่เพิ่มรหัสของเราอย่างมากกับไลบรารีการควบคุมโค้ดก็จะดีมากเช่นกัน
แน่นอนว่านี่เป็นวิถีของเจไดรหัสมีความซับซ้อนมากที่สุด การควบคุมสูงสุดของสิ่งต่าง ๆ ที่ไม่จำเป็นต้องควบคุมซอร์สโค้ดนั้นน้อยที่สุดและด้วยความรู้ของ golimy JavaScript เราสามารถไปทำงานได้อย่างปลอดภัยเพราะเราต้องการคนเหล่านี้
แต่งานของเราคือไม่หางาน แต่วาดจุดในวิธีที่ง่ายและสะดวกเวกเตอร์ของเราคือความเร็วและความยืดหยุ่น
ฉันเลือกห้องสมุด
p5js เพื่อวาดจุดไม่ใช่แค่นั้น แน่นอน ถ้างานคือการวาดจุด และนั่นคือมัน แน่นอน ทุกอย่างจะต้องทำให้เสร็จใน JavaScript เปล่า แต่ฉันกำลังทำสิ่งนี้ในมุมมอง .kจากนั้นคุณและฉันจะทำอย่างอื่นที่ดูน่าทึ่ง และสำหรับสิ่งนี้ เราจำเป็นต้องมีเครื่องมือที่ดีหนึ่งในนั้นคือ p5jsใน golim JavaScript เราจำเป็นต้องสร้างแคนวาสเพื่อกำหนดฟังก์ชันการเริ่มต้นและการวาดใหม่ ใน p5 สิ่งนี้ก็ทำได้เช่นกัน แต่กระชับมาก
แต่แรก..
การตั้งค่าสภาพแวดล้อมขั้นต่ำสำหรับการพัฒนา JavaScript
ดาวน์โหลด
p5.min.js และเก็บไว้เคียงข้างกันแบบนี้
index.html
<html>
<head>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body style="margin: 0px;">
<main>
</main>
</body>
</html>
sketch.js
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
}
เป็นผลให้เบราว์เซอร์ของคุณเปิดเช่นนี้
HTML นั้นเข้าใจได้ แต่นี่คือรหัส JavaScript ชนิดใด
ฟังก์ชั่นการตั้งค่าคือการเริ่มต้นมันถูกดำเนินการเพียงครั้งเดียวในนั้นเราสร้างผืนผ้าใบเช่นพื้นที่ที่เราจะวาดจุดwindow.innerWidth, window.innerHeight
คือ ความกว้างและความสูงของหน้าจอ กล่าวคือเรากำหนดผ้าใบแบบเต็มหน้าจอและใช่ HTML มีสไตล์ที่สำคัญมากสำหรับสิ่งนี้เช่นกัน
<body style="margin: 0px;">
เราไม่จำเป็นต้องเริ่มต้นอะไรอีก เราแค่ต้องวาดจุดดูหลักการที่นี่ .. ฟังก์ชั่นการวาดถูกดำเนินการเช่น 60 ครั้งต่อวินาทีและ 60 ครั้งต่อวินาทีเราจะวาดจุดของเรา .. ดูเหมือนว่ามันงี่เง่าเราแค่ต้องวาดจุดและนั่นคือ แต่ในอนาคตมันจะเป็นพื้นฐานสำหรับแอนิเมชั่นทั่วไปทั้งหมด
โดยทั่วไป รหัสสำหรับการวาดจุดนั้นง่ายมาก:
point(10,10)
และทั้งหมด!
อย่างไรก็ตาม รหัสของเราใหญ่กว่าเล็กน้อย
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
พื้นหลังสีดำ
ดาวสีขาว
จุดความหนา10
และเราวาดมันตรงกลางแนวตั้งและแนวนอน
อืม.. เราวาดจุดบนผ้าใบ ทุกอย่างเป็นไปตามที่ควรจะเป็น แต่เราสามารถวาดมันบน HTML ล้วนๆ ได้โดยไม่ต้องใช้ JavaScript เลย.. มันจะมีหน้าตาเป็นอย่างไร?
มันทำให้เป็นพื้นฐานและง่ายยิ่งขึ้นไปอีก แต่หลักการต่างกันโดยสิ้นเชิงนี่คือรหัสสุดท้ายสำหรับการวาดสี่เหลี่ยมจัตุรัสตรงกลางหน้าจอ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
<div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>
ผลลัพธ์ก็ใกล้เคียงกัน
ใช่ มันค่อนข้างง่ายที่จะวาดบางสิ่งที่อยู่ตรงกลางใน HTML แต่เพื่อที่จะเพิ่มแอนิเมชั่น และเพื่อการโต้ตอบที่สมเหตุสมผล คุณจะต้องคิดตามหลักการของ CSSแม้ว่าจะเป็นงานที่น่าสนใจทีเดียวมีเพียงสิ่งพื้นฐานเดียวเท่านั้นที่ฆ่าทั้งหมดนี้ ไม่มีตัวเลขสุ่มใน CSS สิ่งนี้จะฆ่าความพยายามทั้งหมดของเราในอนาคต ซึ่งเป็นเหตุผลที่ฉันจะให้ความสำคัญกับทิศทางนี้น้อยลง
หากฉันจินตนาการว่าฉันต้องการสร้างท้องฟ้าที่เต็มไปด้วยดวงดาวบน CSS เปล่า ทุกอย่างก็จะไม่เกิดผลสำหรับฉันเพราะดาวควรปรากฏขึ้นในตำแหน่งสุ่ม และหากมีพิกัดที่สร้างไว้ล่วงหน้า มันจะไม่สวยงามนักและไม่ง่ายนัก เพราะคุณสามารถเขียนตัวสร้างตัวเลขสุ่มใน CSS ได้ แต่โค้ดดังกล่าวจะดูน่าเกลียดอย่างยิ่ง อ่านไม่ออก และยาก เข้าใจ!