JavaScript: dessiner un point

Apprenons à dessiner un point en JavaScript dans un navigateur.. ce n'est pas techniquement difficile, mais seulement pour ceux qui tâtonnent, et pour ceux qui ne sont pas prêts à dessiner un point sur Internet - c'est bien sûr tout un exploit.

Il y a plusieurs façons de dessiner un point, regardons-les

Constructeurs de jeux



En utilisant Unity/Godot/microStudio ou l'un des milliers de constructeurs de jeux... ils créeront tous du code d'une manière ou d'une autre qui sera JavaScript ou Webassembly, et nous montrera toujours le point.Nous ne sommes pas intéressés par cette voie.on ne comprendra pas vraiment ce qui se passe, le contrôle sur le code sera minime et illisible dans le code source, en plus c'est énorme.

Cadres JavaScript

Cette voie du Jedi est aussi proche que possible de nous, car.notre code ne sera pas grand et clair comme le jour, nous n'abstrairerons pas grand-chose, nous n'augmenterons pas beaucoup notre code avec des bibliothèques.Le contrôle du code serait bien aussi

JavaScript pur

C'est bien sûr la voie des Jedi.Le code est aussi compliqué que possible, le contrôle maximal des choses qui, pour ainsi dire, n'ont pas besoin d'être contrôlées.Les codes sources sont les plus minimes et avec la connaissance de Golimy JavaScript, nous pouvons simplement aller chercher un emploi en toute sécurité, car.nous avons besoin de telles personnes.

Mais notre tâche n'est pas de trouver un emploi, mais de dessiner un point d'une manière simple et facile.Notre vecteur est la rapidité et la flexibilité.

J'ai choisi la bibliothèque

p5js dessiner un point.Ce n'est pas seulement que, bien sûr, si la tâche était de dessiner un point et c'est tout, bien sûr, tout devrait être fait en JavaScript pur, mais je le fais en perspective, .k.alors vous et moi ferons d'autres choses qui auront l'air incroyables, et pour cela nous avons besoin d'un bon outil.L'un d'eux est p5js.

En golim JavaScript, nous devons créer un canevas pour définir les fonctions d'initialisation et de redessin, en p5 cela se fait aussi, mais de manière très concise.

Mais d'abord..

Configuration minimale de l'environnement pour le développement JavaScript

Télécharger

p5.min.js et gardez-le côte à côte.

comme ça

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

Cela s'ouvrira dans votre navigateur comme ceci:

Eh bien, le HTML est compréhensible, mais de quel type de code JavaScript s'agit-il?

la fonction de configuration est l'initialisation, elle est exécutée une fois, nous y créons un canevas, c'est-à-direzone où nous allons dessiner un point.window.innerWidth, window.innerHeight

est la largeur et la hauteur de l'écran, c'est-à-direnous définissons un canevas plein écran et oui, le HTML a un style très important pour cela aussi

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

Nous n'avons pas besoin d'initialiser quoi que ce soit d'autre, nous avons juste besoin de dessiner un point.Regardez le principe ici.. la fonction draw est exécutée, par exemple, 60 fois par seconde, et 60 fois par seconde on va dessiner notre point.. il paraitrait que c'est bête, il suffit de dessiner un point et c'est il, mais à l'avenir ce sera la base de toute l'animation générale.

En général, le code pour dessiner un point est extrêmement simple :

point(10,10)

et c'est tout!

Cependant, notre code est légèrement plus grand

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

fond noir

étoile blanche

épaisseur de point 10

et nous le dessinons au centre de la verticale et de l'horizontale.

Eh bien… nous avons dessiné un point sur le canevas, tout est comme il se doit, mais nous pourrions même le dessiner sur du HTML pur sans aucun JavaScript. À quoi cela ressemblerait-il?

Cela le rend élémentaire et même plus facile, mais les principes sont complètement différents, voici le code final pour dessiner un carré au centre de l'écran

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

Le résultat est presque le même

Oui, il est assez facile de dessiner quelque chose au centre en HTML, mais pour ajouter des animations, et plus encore une saine interactivité, il va falloir penser selon les principes du CSS.Bien que ce soit une tâche assez intéressante.Une seule chose élémentaire tue tout ça, il n'y a pas de nombres aléatoires en CSS, cela tuera toutes nos tentatives à l'avenir, c'est pourquoi je donnerai moins de préférence à cette direction.

Si j'imagine que je veux faire un ciel étoilé sur CSS nu, alors tout ne fonctionnera pas pour moi, carles étoiles devraient apparaître dans des positions aléatoires, et si elles ont des coordonnées pré-créées, ce ne sera pas si beau et pas si simple, car vous pouvez écrire un générateur de nombres aléatoires en CSS, mais un tel code aura l'air complètement moche, illisible et difficile à comprendre!



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