جاواسکریپټ: یوه نقطه رسم کړئ

راځئ چې زده کړو چې څنګه په براوزر کې جاواسکریپټ کې نقطه رسم کړو.. دا تخنیکي پلوه ستونزمن نه دی، مګر یوازې د هغو کسانو لپاره چې ګونګ وي، او د هغو کسانو لپاره چې په انټرنیټ کې د نقطې نقشه کولو لپاره چمتو نه دي - البته دا یوه بشپړه لاسته راوړنه ده.

د یوې نقطې د جوړولو لپاره ډیری لارې شتون لري، راځئ چې دوی وګورو

د لوبې جوړونکي



د یونیټي / ګوډوټ / مایکرو سټوډیو یا د زرګونو لوبو جوړونکو څخه کارول.. دوی ټول به په یو ډول یا بل ډول یو څه کوډ رامینځته کړي چې جاواسکریپټ یا ویباسمبلي به وي ، او لاهم موږ ته نقطه ښیې.موږ په دې لاره کې دلچسپي نه لرو.موږ به واقعیا نه پوهیږو چې څه پیښیږي ، د کوډ کنټرول به د سرچینې کوډ کې لږترلږه او د لوستلو وړ نه وي ، سربیره پردې دا خورا لوی دی.

جاواسکریپټ چوکاټونه

د Jedi دا لاره موږ ته د امکان تر حده نږدې ده، ځکه.زموږ کوډ به د ورځې په څیر لوی او روښانه نه وي، موږ به ډیر خلاص نه کړو، موږ به د کتابتونونو سره خپل کوډ ډیر نه کړو.د کوډ کنټرول به خورا ښه وي

خالص جاواسکریپټ

البته دا د جیدي لاره ده.کوډ د امکان تر حده پیچلی دی ، د شیانو اعظمي کنټرول چې لکه څنګه چې و ، کنټرول ته اړتیا نلري.د سرچینې کوډونه خورا لږ دي او د ګولیمي جاواسکریپټ پوهې سره ، موږ کولی شو په خوندي ډول د دندې ترلاسه کولو لپاره لاړ شو ، ځکه چې.موږ داسې خلکو ته اړتیا لرو.

خو زموږ دنده د کار موندل نه، بلکې په ساده او اسانه طریقه د نقطې رسمول دي.زموږ ویکتور سرعت او انعطاف دی.

ما کتابتون غوره کړ

p5js یوه نقطه رسمولدا یوازې دا نه دي، البته، که دنده د یوې نقطې په نښه کول وي او دا وي، البته، هرڅه باید په جاواسکریپټ کې ترسره شي، مګر زه دا په لید کې کوم، .k.بیا تاسو او زه به نور شیان ترسره کړو چې حیرانتیا به ښکاري، او د دې لپاره موږ یو ښه وسیله ته اړتیا لرو.یو یې p5js دی.

په ګولیم جاواسکریپټ کې، موږ اړتیا لرو چې یو کینوس جوړ کړو ترڅو د پیل کولو او بیا رغاونې افعال تعریف کړو، په p5 کې دا هم ترسره کیږي، مګر په خورا لنډ ډول.

خو لومړی..

د جاواسکریپټ پراختیا لپاره لږترلږه چاپیریال تنظیم کول

ډاونلوډ کړئ

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 د پوهیدو وړ دی، مګر دا کوم ډول جاواسکریپټ کوډ دی؟

د سیټ اپ فنکشن ابتکار دی، دا یو ځل اجرا کیږي، پدې کې موږ یو کینوس جوړوو، د بیلګې په توګه.هغه ساحه چیرې چې موږ به یو ټکی رسم کړو.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

او موږ دا د عمودی او افقی په مرکز کې رسم کوو.

ښه.. موږ په کینوس کې یوه نقطه رسم کړه، هرڅه لکه څنګه چې باید وي، مګر موږ کولی شو دا په خالص 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 کې د تصادفي شمیرې جنریټر ولیکئ ، مګر دا کوډ به په بشپړ ډول بدمرغه ، نه لوستل کیدونکي او سخت ښکاري. پوه شه!



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