Dibujar un rectángulo básico con la etiqueta canvas de html5

Para utilizar el lona etiqueta disponible en HTML5, construir una página web con una lona elemento en ella. Por lo general, usted proporcione anchura, altura, y carné de identidad parámetros que indican cuán grande es el cnavas es, de este modo:

Su navegador no soporta la etiqueta canvas ...
Video: RECTÁNGULOS EN CANVAS

Dentro de lona etiqueta, que puede incluir cualquier código HTML que desea. Este código aparecerá si el navegador no es compatible con el lona etiqueta. Por lo general, sólo hay que poner algún tipo de mensaje que así el usuario sabe lo que se pierde.

Nada interesante sucede en un lienzo sin algún tipo de código javascript. A menudo, va a utilizar una función para dibujar en la pantalla. Aquí hay uno dibujar() función, que es llamada por la body onload evento:

 función draw () {var lienzo = document.getElementById ("dibujo") -Si (canvas.getContext) {var con = canvas.getContext ( `2d`) - con.fillStyle = "# FF0000"-con.fillRect (10, 10, 50, 50) -} // fin if} // sorteo final

los dibujar() función ilustra todas las ideas principales de trabajo con la etiqueta canvas. He aquí cómo se construye un dibujo básico:

1. Crear una referencia variable a la lona.

   Utilizar la norma getElementById () mecanismo para crear una variable que refiere a la lona.

2. Extraer el contexto gráfico de la tela.

   Video: Animación básica con HTML5 - Introducción al CANVAS con HTML5

   elementos de lona tienen una contexto gráfico, que es un objeto especial que encapsula todos los métodos de dibujo de la tela puede realizar. La mayoría de los navegadores soportan un contexto 2D ahora, pero se han previsto contextos 3D.

3. Establecer la década de contexto fillStyle, lo que indica cómo va a color de lleno en zonas (como rectángulos).

   El enfoque básico es suministrar un valor de color de estilo CSS.

4. Crear un rectángulo relleno de entrada.

   La forma de rectángulo es bastante fácil de construir. Se espera que cuatro parámetros: x, y, anchura, y altura. los x y y parámetros indican la posición de la esquina superior izquierda del rectángulo, y el anchura y altura parámetros indican el tamaño del rectángulo. Todas las medidas son en píxeles.