Comienza con el lienzo HTML

Oct 4, 2023

Cómo

[dieciséis]

El html & lt; lienzo & gt; Elemento es una solución poderosa para crear gráficos basados en píxeles en la web usando Javascript , y le permitirá crear algunos efectos notables con un poco de práctica.

En este tutorial, echemos un vistazo a crear un objeto de lona, dibujando imágenes simples en ella y animando esas imágenes.

01. Crea una página

El lienzo es fundamentalmente un elemento HTML que coloca en la página, escala para cubrir el área que desea y luego puede recurrir. Para comenzar, necesitamos crear una página simple con un objeto de lona.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
  & lt; cabeza y gt;
  & lt; meta charset = 'UTF-8' / & gt;
  & lt; title & gt; html Canvas Demo & Lt; / Title & GT;
  & lt; link rel = 'stylesheet' href = 'custom.css' / & gt;
  & lt; script src = "canvas.js" & gt; & lt; / script & gt;
  & lt; / cabeza y gt;
  & lt; cuerpo y gt;
  & lt; lienzo id = "html-lienzos" & gt;
  & lt; / body & gt;
& lt; / html & gt;

02. Escala el lienzo

Para darnos un montón de espacio para jugar, queremos que nuestro lienzo llene toda la pantalla. También le daremos un fondo negro para que sepas que definitivamente está allí. Esto realmente puede ser un poco complicado para hacer sin terminar con barras de desplazamiento o espacio en blanco. El CSS a continuación debería cuidarlo.

 lienzo {
  Altura: 100vh;
  Ancho: 100VW;
  Posición: Absoluto;
  Color de fondo: # 000000;
}
  Margen: 0;
  relleno: 0;
}

03. Inicializar el lienzo para su uso.

A continuación, debemos agregar un poco de JavaScript para configurar el lienzo listo para usar. Lo haremos enrojecer un evento DOMCONTENTLADO para garantizar que el script no intente ejecutar antes de que el elemento de lienzo esté listo. También lo haremos, establecerá la resolución de lienzo para que coincida con el área que cubre, de lo contrario, el lienzo se escalará sin aumentar la resolución, lo que llevó a gráficos borrosos o pixelados.

 document.addeventlistener ("domcontentloaded", función () {
  var lienzo = document.getelementbyid ("html-lienz");
  var círculos = [];
  var radio = 50;
  lienzo.width = lienzo.clientwidth;
  lienzo.height = lienzo.clientheight;
  vage contexto = canvas.getcontext ("2d");
}, falso);

04. Dibuja una forma.

Notará que en el último paso, crecimos algo llamado 'contexto'. Así es como se produce el dibujo en el lienzo. Es más fácil pensar en el contexto como pincel que podemos usar para dibujar diferentes líneas, arcos y formas básicas.

Lo que podemos hacer ahora es poner nuestro contexto para usarlo escribiendo una función de dibujo que creará un arco de 360 grados, es decir, un círculo. Hacemos esto al decirle el contexto para definir un arco, establecer estilos para la frontera y rellenar, luego subir las funciones de relleno () y accidente cerebrovascular () para dibujar la forma (el accidente cerebrovascular).

 Función Drawcircle (X, Y, Radio, Frontera, Border_Colour, Fill_Colour)
  {
  contexto.beginpath ();
  context.arc (x, y, radio, 0,2 * math.pi);
  contexto.strokestyle = border_colour;
  contexto.Fillstyle = Fill_Colour;
  contexto.linewidth = frontera;
  contexto.clesepath ();
  contexto.ese ();
  contexto.stroce ();
  }

05. Crea muchos círculos.

Genial. Tenemos una función que puede dibujar círculos. Ahora necesitamos algo para dibujar. Amplemos el código del Paso 3 para crear una matriz que describe los objetos del círculo. Almacenará las coordenadas, color y un valor de dirección de cada círculo X e Y.

Creamos esta estructura de matriz en lugar de simplemente dibujar círculos de inmediato porque nos permitirá animar los círculos al volver a dibujar los contenidos de la matriz más adelante.

 para (var i = 0; i & lt; 20; i ++) {
  var x = radio + (math.random () * (lienzo.width - (2 * radio));
  var y = radio + (math.random () * (Canvas.height - (2 * radio));
  var color = randomcolour ();
  var dirección = math.random () * 2.0 * math.pi;
  círculos.push ({x: x, y: y, color: color, dirección: dirección});
  dibujar(); }

06. aleatorizar el color

En el último paso, hemos utilizado un par de nuevas funciones que aún no han sido definidas. Vamos a empezar con RandomColour (). Esta será una función de utilidad que devuelva una cadena hexadecimal aleatorizada que representa un color. Es bastante sencillo implementar.

 Función RandomColour () {
  var chars = '0123456789abcdef';
  var color = '#';
  para (var i = 0; i & lt; 6; i ++) {
  color + = caracteres [math.floor (math.random () * 16)];
  }
  Color de devolución; }

07. Dibuja los gráficos en la página.

Ahora estamos listos para reunir cosas implementando la función DRABRE (). Esto hará dos cosas clave. En primer lugar, eliminará el lienzo utilizando la función CLEARRECT (). Esto será importante cuando venimos a animar nuestros círculos, para evitar dibujar el nuevo marco en la parte superior de lo antiguo. Luego, iterará a través de la matriz que construimos y dibujamos cada círculo en el lienzo en sucesión usando nuestra función de dibujo.

 Dibujo de función () {
  contexto.clearrect (0, 0, lienzo.width, lienzo.height);
  círculos.foreach (función (círculo) {
  Drawcircle (Circle.x, Circle.y, Radio, 5, Circle.Colour, Circle.Colour);
    }); }

08. Animar las formas.

Si lo intentas ahora, verá algunos círculos estáticos pintados en la página. Pero queremos animarlos. Para hacer esto, debemos extender nuestra función de dibujo () de un par de maneras. En primer lugar, usaremos el valor de Circle.Direction, empujamos a la matriz para calcular los cambios en la posición X e Y para el círculo.

A continuación, usaremos una función incorporada llamada SolegioMationframe que llama recursivamente la función DRABA (). SolegueMationFrame permite que el navegador decida cuándo volver a llamar a la función, evitando la necesidad de implementar temporizadores para calcular cuándo dibujar el siguiente cuadro.

 Dibujo de función () {
  contexto.clearrect (0, 0, lienzo.width, lienzo.height);
  círculos.foreach (función (círculo) {
  círculo.x = círculo.x + matemath.cos (Circle.direction);
  círculo.y = círculo.y + math.sin (Circle.direction);
  Drawcircle (Circle.x, Circle.y, Radio, 5, Circle.Colour, Circle.Colour);
  });
  solicitud de solicitud (sorteo);
  }

09. rebotar en el borde de la página

Aunque todavía falta una cosa. Los círculos ahora simplemente desaparecen del borde de la pantalla. Vamos a hacer que se recuperen. Para hacer esto, agregaremos una llamada a una nueva función, rebotar (círculo), dentro del bucle forach de la función DRABA ().

La función de rebote determinará cuando un círculo está en el borde de la pantalla, y ajuste su valor de dirección adecuadamente.

 Bounce de función (Círculo) {
  if ((((Circle.x - radio) & lt; 0) || ((Circle.y - radio) & lt; 0) || ((círculo.x + radio) y gt; lienzo.width) || ((círculo. y + radio) & gt; lienzo.height)) {
  Circle.direction + = (math.pi / 2);
  }
  if (Circle.direction & gt; (2 * math.pi)) {
  círculo.dirección - = (2 * math.pi);
  }
}

Este artículo apareció originalmente en Diseñador web Número 266. Comprarlo aquí.

Artículos relacionados:

Crea un grabado digital un boceto con lienzo
Todo lo que necesita saber sobre el nuevo nodo.js 8
Cómo exportar las animaciones de los efectos a HTML5

Comienza con el lienzo HTML

01. Crea una página

02. Escala el lienzo

03. Inicializar el lienzo para su uso.

04. Dibuja una forma.

05. Crea muchos círculos.

06. aleatorizar el color

07. Dibuja los gráficos en la página.

08. Animar las formas.

09. rebotar en el borde de la página

Cómo - Artículos más populares

Cómo usar el almacenamiento en la nube como creativo

Cómo hacer una aplicación de Apple Watch

Explore la visualización de datos con p5.js

Construye prototipos con Adobe XD

Prepare una tabla para pintar en 3 sencillos pasos

Cómo crear colores brillantes con pinturas al óleo

Construir aplicaciones que funcionan fuera de línea

Edad de una fotografía en Photoshop CC

Categorías