דזשאַוואַסקריפּט: ציען אַ פּונקט

לאָמיר זיך לערנען ווי צו ציען אַ פונט אין דזשאַוואַסקריפּט אין אַ בלעטערער.. עס איז נישט טעקניקלי שווער, אָבער בלויז פֿאַר די וואס פאַמיליע, און פֿאַר די וואס זענען נישט גרייט צו ציען אַ פונט אויף די אינטערנעט - דאָס איז אַוודאי אַ גאַנץ דערגרייה.

עס זענען פילע וועגן צו ציען אַ פונט, לאָזן אונדז קוק אין זיי

שפּיל קאַנסטראַקטערז



ניצן Unity/Godot/microStudio אָדער קיין פון די טויזנטער פון שפּיל בילדערז .. זיי וועלן אַלע מאַכן עטלעכע קאָד אין איין אָדער אנדערן וועג וואָס וועט זיין דזשאַוואַסקריפּט אָדער וועבאַסעמבלע, און נאָך ווייַזן אונדז די פונט.מיר זענען נישט אינטערעסירט אין דעם וועג.מיר וועלן נישט טאַקע פֿאַרשטיין וואָס איז געשעעניש, קאָנטראָל איבער די קאָד וועט זיין מינימאַל און אַנרידאַבאַל אין די מקור קאָד, חוץ עס איז ריזיק.

דזשאַוואַסקריפּט פראַמעוואָרקס

דער וועג פון די דזשעדי איז ווי נאָענט ווי מעגלעך צו אונדז, ווייַל.אונדזער קאָד וועט נישט זיין גרויס און קלאָר ווי טאָג, מיר וועלן נישט אַבסטראַקט פיל, מיר וועלן נישט זייער פאַרגרעסערן אונדזער קאָד מיט לייברעריז.קאָד קאָנטראָל וואָלט אויך זיין גרויס

ריין דזשאַוואַסקריפּט

דאָס איז דאָך דער וועג פון די דזשעדי.דער קאָד איז ווי קאָמפּליצירט ווי מעגלעך, די מאַקסימום קאָנטראָל פון זאכן וואָס, ווי עס איז, דאַרף ניט זיין קאַנטראָולד.די מקור קאָודז זענען די מערסט מינימאַל און מיט די וויסן פון גאָלימי דזשאַוואַסקריפּט, מיר קענען נאָר בעשאָלעם גיין צו באַקומען אַ אַרבעט, ווייַל.מיר דאַרפֿן אַזאַ מענטשן.

אבער אונדזער אַרבעט איז נישט צו געפֿינען אַ אַרבעט, אָבער צו ציען אַ פּונקט אויף אַ פּשוט און גרינג וועג.אונדזער וועקטאָר איז גיכקייַט און בייגיקייַט.

איך האב אויסדערוויילט די ביבליאָטעק

p5js צו ציען אַ פּונקט.עס איז ניט נאָר אַז, פון קורס, אויב די אַרבעט איז געווען צו ציען אַ פונט און אַז ס עס, פון קורס, אַלץ וואָלט האָבן צו זיין געטאן אין נאַקעט דזשאַוואַסקריפּט, אָבער איך בין טאן דעם אין פּערספּעקטיוו, .ק.דעמאָלט איר און איך וועלן טאָן אנדערע זאכן וואָס וועט קוקן אַמייזינג, און פֿאַר דעם מיר דאַרפֿן אַ גוט געצייַג.איינער פון זיי איז p5js.

אין Golim דזשאַוואַסקריפּט, מיר דאַרפֿן צו שאַפֿן אַ לייַוונט צו דעפינירן די יניטיאַליזאַטיאָן און רידראַווינג פאַנגקשאַנז, אין פּ5 דאָס איז אויך געטאן, אָבער זייער קאַנסייסלי.

אבער קודם..

מינימום סוויווע סעטאַפּ פֿאַר דזשאַוואַסקריפּט אַנטוויקלונג

אראפקאפיע

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 איז פאַרשטיייק, אָבער וואָס מין פון דזשאַוואַסקריפּט קאָד איז דאָס?

די סעטאַפּ פֿונקציע איז יניטיאַליזאַטיאָן, עס איז עקסאַקיוטאַד אַמאָל, אין עס מיר מאַכן אַ לייַוונט, י.ע.געגנט ווו מיר וועלן ציען אַ פונט.ווינדאָו.יננערווידטה, פֿענצטער.יננערהעיגהט

איז די ברייט און הייך פון די פאַרשטעלן, ד.ה.מיר דעפינירן אַ פול-פאַרשטעלן לייַוונט און יאָ, די 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, דעמאָלט אַלץ וועט נישט אַרבעטן פֿאַר מיר, ווייַלשטערן זאָל זיין געוויזן אין טראַפ - שטעלעס, און אויב זיי האָבן פאַר - באשאפן קאָואָרדאַנאַץ, עס וועט נישט זיין אַזוי שיין און נישט אַזוי פּשוט, ווייַל איר קענען שרייַבן אַ טראַפ - נומער גענעראַטאָר אין 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