Imos aprender a debuxar un punto en JavaScript nun navegador.. non é técnicamente difícil, pero só para aqueles que non están preparados para debuxar un punto en Internet: este é, por suposto, todo un logro.
Hai moitas formas de debuxar un punto, vexámolos
Usando Unity/Godot/microStudio ou calquera dos miles de creadores de xogos... todos eles crearán algún código dun xeito ou outro que será JavaScript ou Webassembly, e aínda nos mostrarán o punto.Non nos interesa este camiño.non entenderemos realmente o que está a suceder, o control sobre o código será mínimo e ilexible no código fonte, ademais é enorme.
Este camiño dos Jedi está o máis próximo posible a nós, porque.o noso código non será grande e claro como o día, non abstraeremos moito, non aumentaremos moito o noso código coas bibliotecas.O control do código tamén sería xenial
Este é, por suposto, o camiño dos Jedi.O código é o máis complicado posible, o máximo control das cousas que, por así dicilo, non precisan ser controladas.Os códigos fonte son os máis mínimos e co coñecemento do JavaScript de Golimy, podemos ir con seguridade para buscar un emprego, porque.necesitamos xente así.
Pero a nosa tarefa non é atopar traballo, senón debuxar un punto dun xeito sinxelo e sinxelo.O noso vector é a velocidade e a flexibilidade.
Eu escollín a biblioteca
p5js para debuxar un punto.Non se trata só de que, por suposto, se a tarefa fose debuxar un punto e xa está, claro, todo habería que facerse en simple JavaScript, pero estou facendo isto en perspectiva, .k.entón ti e mais eu faremos outras cousas que parecerán incribles, e para iso necesitamos unha boa ferramenta.Un deles é p5js.En JavaScript de golim, necesitamos crear un lenzo para definir as funcións de inicialización e redeseño, en p5 tamén se fai, pero de forma moi concisa.
Pero primeiro..
Configuración do contorno mínimo para o desenvolvemento de JavaScript
Descargar
p5.min.js e mantelo lado a lado.como isto
índice.html
<html>
<head>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body style="margin: 0px;">
<main>
</main>
</body>
</html>
bosquexo.js
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
}
Isto abrirase no teu navegador así:
Ben, HTML é comprensible, pero que tipo de código JavaScript é este?
a función de configuración é a inicialización, execútase unha vez, nela creamos un lenzo, é dicir.zona onde debuxaremos un punto.window.innerWidth, window.innerHeight
é o ancho e o alto da pantalla, é dicir.definimos un lenzo a pantalla completa e si, o HTML tamén ten un estilo moi importante para isto
<body style="margin: 0px;">
Non necesitamos inicializar nada máis, só necesitamos debuxar un punto.Mira o principio aquí .. a función de debuxo execútase, por exemplo, 60 veces por segundo, e 60 veces por segundo debuxaremos o noso punto .. Parece que isto é estúpido, só necesitamos debuxar un punto e iso é iso, pero no futuro será a base para toda a animación xeral.
En xeral, o código para debuxar un punto é moi sinxelo:
point(10,10)
e xa está!
Non obstante, o noso código é un pouco maior
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
fondo negro
estrela branca
grosor do punto 10
e debuxámolo no centro da vertical e horizontal.
Pois... debuxamos un punto no lenzo, todo está como debe ser, pero ata poderíamos debuxalo en HTML puro sen ningún JavaScript.. Como sería?
Faino elemental e aínda máis sinxelo, pero os principios son completamente diferentes, aquí está o código final para debuxar un cadrado no centro da pantalla
<!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>
O resultado é case o mesmo
Si, é bastante sinxelo debuxar algo no centro en HTML, pero para engadir animacións, e máis aínda un interactivo sensato, terás que pensar segundo os principios de CSS.Aínda que é unha tarefa bastante interesante.Só unha cousa elemental mata todo isto, non hai números aleatorios en CSS, isto matará todos os nosos intentos no futuro, polo que darei menos preferencia a esta dirección.
Se imaxino que quero facer un ceo estrelado en CSS espido, entón todo non me funcionará, porqueas estrelas deberían aparecer en posicións aleatorias, e se teñen coordenadas creadas previamente, non será tan bonito nin tan sinxelo, porque podes escribir un xerador de números aleatorios en CSS, pero tal código parecerá completamente feo, ilexible e difícil de leer. entende!