Lienzo en html | Explicado con ejemplos

Lienzo en html | Explicado con ejemplos
En html, La etiqueta se puede utilizar para dibujar los gráficos en los sitios web. El lienzo actúa como contenedor para los gráficos, y para dibujar los gráficos utilizamos un script como JavaScript. Por lo tanto, en el Etiquete un atributo de identificación se debe utilizar que se refiera al Elemento al JavaScript. Se puede usar para dibujar gráficos, imágenes, animaciones, etc. Este artículo presenta una guía completa para el Etiqueta con ayuda de algunos fragmentos de código.

En este artículo aprenderemos los siguientes conceptos relacionados con el etiqueta:

  • Conceptos básicos de la etiqueta
  • Cómo crear elemento
  • Cómo usar lienzo con JavaScript
  • Cómo dibujar formas básicas en lienzo

Empecemos!

Conceptos básicos de la etiqueta

Los atributos de ID, altura y ancho son necesarios para cualquier elemento. El atributo de identificación se utiliza para referirse al lienzo en JavaScript, mientras que los atributos de altura y ancho determinan el tamaño del lienzo. En un solo documento HMTL, podemos tener varias etiquetas.

Cómo crear elemento

Consideremos el fragmento de abajo para comprender cómo crear un elemento de lona:

Aquí, id = lienzo que se utilizará en el script para encontrar el elemento de lona, ​​el ancho y los atributos de altura establecen el ancho y la altura del lienzo como el atributo de 250px y estilo se usa para diseñar el elemento de lona.

Cómo usar lienzo con JavaScript

En esta sección, proporcionaremos una guía paso a paso para usar el elemento con JavaScript. Tenemos que seguir los pasos mencionados a continuación para continuar:

En primer lugar, tenemos que obtener el elemento y para este propósito "GetElementId ()" El método se utilizará como se muestra en el siguiente fragmento del código:

A continuación, crearemos un objeto de dibujo usando un objeto incorporado "GetContext ()" y dentro de este objeto, especificaremos una dimensión como bidimensional como se muestra en la figura a continuación:

var objContext = Can.getContext ("2d");

El último paso es dibujar en el lienzo, especificaremos un "Fillstyle" propiedad para establecer un color para el dibujo:

objcontext.FillStyle = 'Gray';

Cómo dibujar formas básicas en lienzo

Esta sección elaborará cómo dibujar un rectángulo, línea y círculo en el lienzo:

Rectángulo

Para dibujar un rectángulo en el lienzo, utilizaremos un método Fillrect (). Tomará cuatro valores: primero para x-coordenate, segundo para y coordenadas y tercero para el ancho y cuarto para la altura.

objcontext.Fillrect (10,10,175,85);

Aquí está nuestro fragmento de código completo para dibujar un rectángulo en el lienzo:




Para el código anterior, obtendremos la siguiente salida:

A medida que especificamos el espacio 10px para las coordenadas x, y, en la salida el espacio alrededor de la parte superior e izquierda verifica que nuestro código funcione correctamente.

Línea

Ahora consideremos otro ejemplo simple para entender cómo dibujar una línea en un lienzo. Utilizamos el mover a() y lineto () método para especificar los puntos iniciales y finales de la línea respectivamente. Para dibujar la línea tenemos que usar un método ataque() método:




En la ejecución exitosa del código obtendremos la siguiente salida:

Se dibuja una línea en el lienzo a partir de (0, 0) y que termina en (250, 150).

Círculo

Para dibujar un círculo, utilizaremos beginpath () y arco() métodos para comenzar una ruta y crear un círculo respectivamente. El método de arco tomará valores para las coordenadas x, y, el radio del círculo, el ángulo de inicio y el ángulo final.




Matemáticas.La propiedad PI se utiliza como el punto final del círculo y el siguiente será la salida:

En esta sección, hemos aprendido a dibujar formas básicas en lienzo como una línea, círculo y rectángulo.

Conclusión

El La etiqueta se usa para dibujar gráficos en los sitios web que usan JavaScript y para dibujar una forma en el lienzo se requieren cuatro pasos esenciales I.mi. Cree su lienzo, obtenga el elemento de lienzo utilizando un método de construcción "getElementById ()", Crea tu objeto usando getContext () objeto, y finalmente dibuja las formas en el lienzo. La primera mitad de este artículo demostró cómo crear y usar elementos de lona y la segunda mitad de este tutorial explica cómo dibujar formas básicas con lienzo como una línea, círculo y rectángulo.