Tecnología

Inicio

Cómo hacer un triángulo en HTML

April 11

Cómo hacer un triángulo en HTML


El lenguaje de marcado de hipertexto se utiliza sobre todo para organizar el texto, imágenes y contenido multimedia en páginas web. Sin embargo, además de una serie de otras mejoras importantes, el nuevo estándar HTML5 permite producir arbitrarias dibujos en 2-D en sitios web con código HTML y JavaScript. Dibuja un triángulo en HTML usando el elemento canvas con algo de código JavaScript.

Instrucciones

1 Inserte la siguiente función de JavaScript entre las etiquetas de la cabeza de su documento HTML:

<Script type = "text / javascript">

función dibujarTriangulo (canvasid) {

var canvas = document.getElementById(canvasid);

contexto var = canvas.getContext ( "2d");

context.moveTo (10,4);

context.lineTo (180,190);

context.lineTo (15150);

context.closePath ();

context.stroke ();

}

</ Script>

Cambiar las coordenadas de los vértices del triángulo en el "moveTo" y "lineTo" llamadas a métodos. La esquina superior izquierda de un elemento de tela es el origen de su sistema de coordenadas.

2 Añadir el atributo "onLoad" a la etiqueta del cuerpo del documento HTML para llamar "dibujarTriangulo" cuando se carga la página. He aquí un ejemplo de etiqueta cuerpo:

<Body onLoad = "dibujarTriangulo ( 'canvas1');">

3 Añadir un elemento de tela para el cuerpo del documento HTML, igualando su atributo "id" a la que utilizó en la llamada a "dibujarTriangulo:"

<Canvas id = "canvas1" width = "200" height = "200"> </ canvas>

Ajustar los atributos según sea necesario el "ancho" y "alto" para adaptarse a su triángulo.

4 Guarde la página y lo carga en un navegador Web. Su triángulo aparece en el elemento canvas en la página.

Consejos y advertencias

  • Añadir la siguiente etiqueta de la parte superior de su documento HTML - antes de la primera etiqueta html - garantizar la compatibilidad del elemento de tela con Internet Explorer 9:
  • <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
  • Utilice el método de "relleno" del objeto de contexto para dibujar un triángulo sólido.
  • Asignar colores a las propiedades "fillStyle" del objeto de contexto "strokeStyle" y / o para cambiar el color de su triángulo.