009  Graficos en html: Uso de canvas. 

Ing. Honoria Reyes Macedo

INTRODUCCION:

canvas puede definirse como un entorno para crear imágenes dinámicas.  Se apoya en JavaScript. Utiliza posiciones para ubicarse de izquierda a derecha(x), de arriba hacia abajo(y), la medida en ancho y altura. Utiliza colores en hexadecimal, en rgb, o el nombre del color.

En canvas con javascript se utilizan primitivas de dibujo: arc, fillRect, bezierCurveTo, quadraticCurveTo, clearRect, strokeRect, etc.

Se apoya en metodos: moveTo, lineTo, beginPath, fillStyle, save, translate, rotate, restore, stroke, fill, globalAlpha, shadowColor,  closePath, createLinearGradient, etc.

Ejemplo:

ACTIVIDADES

1.- Agregar un canvas en el archivo html

      a) Agregar la linea canvas en una section de tu pagina html              

<canvas id="cva009" width="valor" height="valor">Aqui va algo</canvas>

b) Agregar antes de cerrar la etiqueta </body> la siguiente linea:

<script src="js/miscanvas.js"></script>

2.-  Crear un archivo miscanvas.js y agregar el siguiente codigo

AGREGAR DENTRO DEL IF: 

AGREGAR DENTRO DEL IF:

AGREGAR DENTRO DEL IF:

AGREGAR DENTRO DEL IF:

AGREGAR DENTRO DEL IF:

 //*** PROBAR EN EL NAVEGADOR HASTA AQUI Y CAMBIAR VALORES Y COLORES *****

 *********************************0*0**************************************

 ******************************000****000**********************************