Lienzo de JavaScript
Este artículo te reconocerá sobre
- ¿Qué es un lienzo?
- Cómo activar un lienzo usando JavaScript
- Cómo cambiar el tamaño de un lienzo usando JavaScript
- Cómo crear formas en un lienzo usando JavaScript
¿Qué es un lienzo?
El lienzo es un contenedor, que nos permite dibujar diferentes formas, líneas y textos en un navegador. Por defecto, el contenedor de lienzo es invisible y no tiene borde. Entonces, para que sea visible, usamos la etiqueta de lona HTML 5 y la propiedad fronteriza CSS.
Sintaxis:
La sintaxis anterior solo muestra un contenedor simple con un borde.
Cómo activar un lienzo usando JavaScript
Básicamente, Canvas es una etiqueta HTML 5, pero solo está en funcionamiento con la ayuda de un JavaScript. El siguiente código es obligatorio para acceder y activar un lienzo.
Código:
Const Canvas = documento.QuerySelector ("#Canvas");consttxt = Canvas.getContext ("2d");
En este código, utilizamos el método QuerySelector () para obtener la ID de lona que conectará nuestro código JavaScript con la etiqueta Canvas. Luego usamos el método getContext () para especificar el entorno de un lienzo (2D o 3D).
Cómo cambiar el tamaño de un lienzo usando JavaScript
Usamos el código JavaScript para dar propiedades de altura y ancho de los objetos de lienzo. Si usamos CSS para dar altura y ancho al contenedor de lienzo, pixelará el contenedor en lugar de cambiarlo. Así que use el siguiente código JavaScript para cambiar el tamaño del contenedor de lienzo.
Sintaxis:
lienzo.altura = 200;lienzo.ancho = 400;
Cómo crear formas en lienzo usando JavaScript
Ahora vamos a ver cómo podemos crear diferentes formas en lienzo usando JavaScript.
Rectángulo
El siguiente código JavaScript se usa para crear un rectángulo en el lienzo.
Sintaxis:
nombre de la variable.Strokerect (value_x, value_y, ancho, altura)Aquí el nombre de la variable representa la variable que hemos creado para el método getContext (). Mientras que el método strockrect () toma cuatro parámetros donde el valor x y el valor y representan la posición en el lienzo donde desea dibujar la forma (rectángulo). Mientras que, el ancho y la altura se utilizan para mencionar el tamaño del rectángulo.
Código:
contexión.Strokerect (50,50,250,100)En este código, se crea un rectángulo con ancho de 250 px y altura de 100px.
Producción:
En caso de que desea cambiar el color del rectángulo, solo agregue el siguiente código antes de su código de creación del rectángulo:
Código:
contexión.strokestyle = "azul";Producción:
Rectángulo lleno
El siguiente código JavaScript se usa para crear un rectángulo relleno en el lienzo.
Sintaxis:
nombre de la variable.Fillrect (value_x, value_y, ancho, altura)El método FillRect () también toma los cuatro parámetros y se usa para crear un rectángulo relleno.
Código:
contexión.Fillrect (50,50,250,100)Producción:
Para cambiar el color del rectángulo, solo use la propiedad FillStyle antes de su código de creación del rectángulo:
Código:
contexión.FillStyle = "Aqua";Producción:
Círculo
El siguiente código JavaScript se usa para crear un círculo en el lienzo.
Sintaxis:
nombre de la variable.arco (valor-x, valor-y, círculo-radio, ángulo de inicio, ángulo final);nombre de la variable.ataque();
Aquí el método Arc () toma cinco parámetros, incluido el valor x y el valor y que representa la posición del círculo, el radio del círculo, el ángulo de inicio y el valor del ángulo final. El método de trazo () se usa dibujar una ruta del círculo que eventualmente mostrará un círculo.
Código:
contexión.arco (180, 100, 80, 0, 2 * matemáticas.PI);contexión.ataque();
Producción:
Línea
El siguiente código JavaScript se usa para crear una línea en el lienzo.
Sintaxis:
nombre de la variable.beginPath ();nombre de la variable.Moveto (valor-x, valor-y);
nombre de la variable.Lineto (punto de inicio, punto final);
nombre de la variable.ataque();
En esta sintaxis,
El método beginPath () inicia una ruta,
El método Moveto () toma dos valores x e y que mueven el cursor al punto específico.
El método Lineto () también toma dos valores, el punto de partida desde donde comienza la línea y el punto de finalización donde termina la línea.
El método Stroke () se usa para dibujar una ruta de la línea que eventualmente mostrará una línea.
Código:
contexión.beginPath ();contexión.Moveto (50,50);
contexión.Lineto (300,150);
contexión.ataque();
Producción:
Texto
El siguiente código JavaScript se usa para escribir un texto en el lienzo.
Sintaxis:
nombre de la variable.font = "Font-Font-Family";nombre de la variable.FillStyle = "Color";
nombre de la variable.relletText ("visualing-text", value-x, value-y);
Primero, debe mencionar el tamaño de fuente y la familia de fuentes utilizando la propiedad de fuentes. En segundo lugar, proporcione el color si desea usar la propiedad FillStyle. Por último, el método FillText () toma tres valores, texto, valor x y valor y.
Código:
contexión.fuente = "50px arial";contexión.FillStyle = "LightGreen";
contexión.Filltext ("Canvas", 110, 120)
Producción:
Texto hueco
El siguiente código JavaScript se usa para escribir un texto hueco en el lienzo.
Sintaxis:
nombre de la variable.font = "Font-Font-Family";nombre de la variable.strokestyle = "color";
nombre de la variable.stroketext ("visualing-text", value-x, value-y);
El método StroketeExt () se usa para escribir texto en estilo hueco ..
Código:
contexión.fuente = "50px arial";contexión.strokestyle = "naranja";
contexión.stroketext ("lienzo", 110, 120)
Producción:
Conclusión
El lienzo es un tablero de arte para dibujar gráficos 2D o 3D en un navegador. En este artículo hemos aprendido cómo podemos dibujar un círculo, rectángulo, línea y texto en un lienzo a través de JavaScript. Aunque el lienzo es una etiqueta HTML5, las operaciones en lienzo solo se pueden realizar con la ayuda de un código JavaScript.