JavaScript: цэг зур

Хөтөч дээр JavaScript дээр цэг зурж сурцгаая.. Энэ нь техникийн хувьд хэцүү биш, гэхдээ зөвхөн төөрөлддөг хүмүүст, мөн Интернет дээр цэг зурахад бэлэн биш хүмүүст энэ нь мэдээжийн хэрэг бүхэл бүтэн амжилт юм.

Цэг зурах олон арга бий, тэдгээрийг харцгаая

Тоглоомын бүтээгчид



Unity/Godot/microStudio эсвэл мянга мянган тоглоом бүтээгчдийн аль нэгийг ашиглан .. тэд бүгд JavaScript эсвэл Webassembly болох ямар нэг байдлаар ямар нэг код үүсгэж, бидэнд гол санааг харуулах болно.Бид энэ замыг сонирхохгүй байна.Бид юу болж байгааг ойлгохгүй байх болно, кодыг хянах нь эх кодонд хамгийн бага бөгөөд унших боломжгүй байх болно, үүнээс гадна энэ нь асар том юм.

JavaScript Frameworks

Жедигийн энэ зам бидэнд аль болох ойр, учир нь.Манай код өдөр шиг том, тодорхой биш, бид нэг их хийсвэрлэхгүй, бид номын сангуудтай кодоо нэг их нэмэгдүүлэхгүй.Кодын хяналт нь бас гайхалтай байх болно

Цэвэр JavaScript

Энэ бол мэдээж Жеди нарын зам.Код нь аль болох төвөгтэй, хянах шаардлагагүй юм шиг зүйлийг дээд зэргээр хянах боломжтой.Эх код нь хамгийн бага бөгөөд golimy JavaScript-ийн мэдлэгтэй бол бид зүгээр л аюулгүйгээр ажилд орох боломжтой.бидэнд ийм хүмүүс хэрэгтэй.

Гэхдээ бидний даалгавар бол ажил олох биш, харин энгийн бөгөөд хялбар аргаар цэг зурах явдал юм.Бидний вектор бол хурд ба уян хатан байдал юм.

Би номын санг сонгосон

p5js цэг зурах.Энэ нь мэдээжийн хэрэг, хэрэв даалгавар нь цэг зурах байсан бол мэдээж бүх зүйлийг JavaScript-ээр хийх ёстой байсан ч би үүнийг хэтийн төлөвөөр хийж байна, .k.тэгвэл та бид хоёр гайхалтай харагдах бусад зүйлсийг хийх болно, үүний тулд бидэнд сайн хэрэгсэл хэрэгтэй болно.Тэдний нэг нь p5js юм.

Golim JavaScript дээр бид эхлүүлэх болон дахин зурах функцийг тодорхойлохын тулд зураг үүсгэх хэрэгтэй, p5 дээр үүнийг бас хийдэг, гэхдээ маш товч.

Гэхдээ эхлээд..

JavaScript хөгжүүлэлтийн хамгийн бага орчны тохиргоо

Татаж авах

p5.min.js мөн хажууд нь байлга.

үүн шиг

индекс.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

нь дэлгэцийн өргөн ба өндөр, i.e.Бид бүтэн дэлгэцийн зотон дүрсийг тодорхойлдог бөгөөд тийм ээ, HTML нь үүнд маш чухал загвартай байдаг

<body style="margin: 0px;">

Бид өөр юу ч эхлүүлэх шаардлагагүй, зөвхөн цэг зурах хэрэгтэй.Энд байгаа зарчмыг хараарай .. зурах функцийг секундэд 60 удаа гүйцэтгэдэг, жишээлбэл, секундэд 60 удаа бид цэгээ зурах болно .. Энэ нь тэнэг юм шиг санагдаж байна, бид зүгээр л цэг зурах хэрэгтэй. Энэ нь, гэхдээ ирээдүйд энэ нь ерөнхий бүх хөдөлгөөнт дүрсний үндэс суурь болно.

Ерөнхийдөө цэг зурах код нь маш энгийн:

point(10,10)

мөн бүгд!

Гэхдээ манай код арай том байна

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

дэвсгэр хар

цагаан од

цэгийн зузаан 10

мөн бид босоо болон хэвтээ төв хэсэгт зурдаг.

За.. бид зотон дээр цэг зурсан, бүх зүйл байх ёстой, гэхдээ бид үүнийг ямар ч JavaScriptгүйгээр цэвэр HTML дээр зурж болно.. Энэ ямар харагдах вэ?

Энэ нь үүнийг энгийн бөгөөд бүр хялбар болгодог, гэхдээ зарчим нь огт өөр тул дэлгэцийн төвд дөрвөлжин зурах эцсийн код энд байна.

<!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