JavaScript: Zeechnen eng Punkt

Loosst eis léieren wéi een e Punkt am JavaScript an engem Browser zeechnen .. et ass net technesch schwéier, awer nëmme fir déi, déi fummelen, a fir déi, déi net bereet sinn e Punkt um Internet ze zéien - dat ass natierlech eng ganz Erreeche.

Et gi vill Weeër fir e Punkt ze zéien, loosst eis se kucken

Spillkonstrukteuren



Benotzen Unity / Godot / microStudio oder ee vun den Dausende vun Spill Builder .. si wäert all e puer Code an déi eng oder aner Manéier schafen, datt JavaScript oder Webassembly wäert, a weisen eis nach de Punkt.Mir sinn net un dësem Wee interesséiert.mir wäerten net wierklech verstoen wat geschitt, d'Kontroll iwwer de Code wäert minimal an onliesbar am Quellcode sinn, ausserdeem ass et enorm.

JavaScript Kaderen

Dëse Wee vum Jedi ass eis sou no wéi méiglech, well.eise Code wäert net grouss a kloer wéi Dag sinn, mir wäerten net vill abstrakt, mir wäerten net vill eise Code mat Bibliothéiken Erhéijung.Code Kontroll wier och super

Pure JavaScript

Dëst ass natierlech de Wee vum Jedi.De Code ass sou komplizéiert wéi méiglech, déi maximal Kontroll vu Saachen déi, wéi et war, net kontrolléiert musse ginn.D'Quellcoden sinn déi minimal a mat dem Wëssen vu golimy JavaScript, kënne mir einfach sécher goen fir eng Aarbecht ze kréien, well.mir brauchen esou Leit.

Awer eis Aufgab ass net eng Aarbecht ze fannen, mee e Punkt op eng einfach an einfach Manéier ze zéien.Eise Vektor ass Geschwindegkeet a Flexibilitéit.

Ech hunn d'Bibliothéik gewielt

p5js eng Punkt ze zéien.Et ass net nëmmen dat, natierlech, wann d'Aufgab war e Punkt ze zéien an dat ass et, selbstverständlech, alles misst a blot JavaScript gemaach ginn, mee ech maachen dat a Perspektiv, .k.da wäerte Dir an ech aner Saachen maachen, déi erstaunlech ausgesinn, an dofir brauche mir e gutt Tool.Ee vun hinnen ass p5js.

Am golim JavaScript musse mir e Canvas erstellen fir d'Initialiséierung an d'Redrawing Funktiounen ze definéieren, am p5 gëtt dëst och gemaach, awer ganz präzis.

Awer éischt..

Minimum Ëmfeld Setup fir JavaScript Entwécklung

Download

p5.min.js an halen et Säit vun Säit.

esou

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);
    }

Dëst wäert an Ärem Browser esou opmaachen:

Gutt, HTML ass verständlech, awer wéi eng Zort JavaScript Code ass dëst?

d'Setupfunktioun ass d'Initialiséierung, et gëtt eemol ausgefouert, an et kreéiere mir e Canvas, d.h.Beräich wou mir e Punkt molen.window.innerWidth, window.innerHeight

ass d'Breet an d'Héicht vum Écran, d.h.mir definéieren e Vollbildschierm Leinwand an jo, den HTML huet och e ganz wichtege Stil dofir

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

Mir brauche näischt anescht ze initialiséieren, mir brauche just e Punkt ze zéien.Kuckt de Prinzip hei .. d'Zeechungsfunktioun gëtt zum Beispill 60 Mol pro Sekonn ausgeführt, a 60 Mol pro Sekonn wäerte mir eise Punkt zéien .. et géif schéngen datt dat domm ass, mir mussen just e Punkt zéien an dat ass et, mee an Zukunft wäert et d'Basis fir allgemeng all Animatioun ginn.

Am Allgemengen ass de Code fir e Punkt ze zéien extrem einfach:

point(10,10)

an dat ass et!

Wéi och ëmmer, eise Code ass e bësse méi grouss

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

Hannergrond schwaarz

wäisse Stär

Punktdicke 10

a mir zéien et am Zentrum vun der vertikaler an horizontal.

Ma.. mir hunn e Punkt op der Leinwand gezeechent, alles ass wéi et soll sinn, awer mir kéinten et souguer op puren HTML ouni JavaScript zéien.. Wéi géif et ausgesinn?

Et mécht et elementar an nach méi einfach, awer d'Prinzipien si komplett anescht, hei ass de leschte Code fir e Quadrat am Zentrum vum Bildschierm ze zéien

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

D'Resultat ass bal d'selwecht

Jo, et ass ganz einfach eppes am Zentrum an HTML ze zéien, awer fir Animatiounen ze addéieren, an nach méi eng vernünfteg interaktiv, musst Dir no de Prinzipien vun CSS denken.Och wann et eng ganz interessant Aufgab ass.Nëmmen eng elementar Saach ëmbréngen all dëst, et gi keng zoufälleg Zuelen an CSS, dëst wäert all eis Versich an Zukunft ëmbréngen, dofir wäert ech manner Preferenz fir dës Richtung ginn.

Wann ech mer virstellen, datt ech e Stärenhimmel op kale CSS maache wëll, da klappt mir alles net, wellStäre sollen an zoufälleg Positiounen erschéngen, a wa se virausgeschriwwe Koordinaten hunn, wäert et net sou schéin an net sou einfach sinn, well Dir kënnt en zoufälleg Zuelengenerator an CSS schreiwen, awer esou Code wäert komplett ellen, onliesbar a schwéier ausgesinn verstinn!





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