JavaScript: วาดจุด

มาเรียนรู้วิธีวาดจุดใน JavaScript ในเบราว์เซอร์กัน.. ไม่ยากในทางเทคนิค แต่สำหรับผู้ที่ซุ่มซ่ามและสำหรับผู้ที่ไม่ได้เตรียมที่จะวาดจุดบนอินเทอร์เน็ต - แน่นอนว่านี่คือความสำเร็จทั้งหมด

การวาดจุดมีหลายวิธี มาดูกันเลย

ตัวสร้างเกม



การใช้ Unity/Godot/microStudio หรือโปรแกรมสร้างเกมนับพัน ๆ ตัว.. พวกเขาทั้งหมดจะสร้างโค้ดไม่ทางใดก็ทางหนึ่งซึ่งจะเป็น JavaScript หรือ Webassembly และยังคงแสดงให้เราเห็นถึงประเด็นนี้เราไม่สนใจเส้นทางนี้เราจะไม่เข้าใจจริงๆ ว่าเกิดอะไรขึ้น การควบคุมโค้ดจะน้อยที่สุดและไม่สามารถอ่านได้ในซอร์สโค้ด นอกจากจะมีขนาดใหญ่มากแล้ว

JavaScript Frameworks

เส้นทางของเจไดนี้อยู่ใกล้ตัวเรามากที่สุดเพราะรหัสของเราจะไม่ใหญ่และชัดเจนเหมือนวัน เราจะไม่ย่อมาก เราจะไม่เพิ่มรหัสของเราอย่างมากกับไลบรารีการควบคุมโค้ดก็จะดีมากเช่นกัน

JavaScript บริสุทธิ์

แน่นอนว่านี่เป็นวิถีของเจไดรหัสมีความซับซ้อนมากที่สุด การควบคุมสูงสุดของสิ่งต่าง ๆ ที่ไม่จำเป็นต้องควบคุมซอร์สโค้ดนั้นน้อยที่สุดและด้วยความรู้ของ 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 ได้ แต่โค้ดดังกล่าวจะดูน่าเกลียดอย่างยิ่ง อ่านไม่ออก และยาก เข้าใจ!





bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese