Reporte de canvas y JavaScript

Reporte de Canvas y Java ScriptPara realizar el primer canvas utilizamos un documento html en el cual se incluyen las etiquetas las cuales indican el lenguaje en el que se va a programar, realmente toda la magia la haremos en JavaScript. Primero debemos referenciar el elemento canvas y adquirir su contexto (API). Por el momento el nico contexto disponible es el contexto bidimensional.

var canvas = document.getElementById('entorno_canvas');var context = canvas.getContext('2d');

Puede parecerte que dibujar usando cdigo JavaScript es algo tedioso y pesado, pero lo cierto es que cuando le pillas el punto puede ser muy divertido. De momento, vamos a especificar el color del trazo:context.strokeStyle = '#8f9814';Cualquier cosa que dibujemos tendr un contorno de color verde. Para visualizar este ejemplo, vamos a dibujar un rectngulo:context.strokeRect (20, 30, 100, 50);La sintaxis del mtodo strokeRect es como sigue strokeRect (izquierda, arriba, ancho, largo). Por lo tanto, en el ejemplo anterior, hemos dibujado un rectngulo posicionado a 20 pixels del margen izquierdo y 30 del derecho con un tamao de 10050 pixels.

Si por ejemplo queremos dibujar un rectngulo relleno con color, deberemos de especificar el color del relleno:context.fillStyle = '#ff8f43';Y dibujar un rectngulo con relleno:context.fillRect(20, 30, 100, 50);

Y si quiero hacer un rectngulo con trazo y relleno?. Pues generamos uno dentro del otro y listo:context.fillRect(20, 30, 100, 50);context.strokeRect(19, 29, 101, 51);

En Canvas no hay funciones definidas para dibujar formas poligonales (salvo para el rectngulo), no existen funciones para dibujar tringulos, pentgonos, etc. La forma de trabajar con Canvas es dibujar "formas" o "caminoslienzo.1. stroke() dibuja una forma abierta o cerrada, sin color de relleno. Si hacemos coincidir el ltimo punto con el primero la forma ser cerrada.2. fill() dibuja una forma cerrada con el color de relleno actual. Si la forma estaba abierta, la propia funcin fill() crea una lnea recta desde el ltimo punto al punto inicial para cerrarla.Ejemplo del cdigoForma cerrada con relleno contexto.beginPath(); contexto.moveTo(200,50); contexto.lineTo(200,150); contexto.lineTo(300,150); contexto.fill();

Formas curvadasPara dibujar curvas diponemos de tres mtodos bsicos. 1. Arcos. 2. Curvas de Bezier. 3. Curvas cuadrticas.1. Arcos.Para dibujar arcos tenemos la funcin:arc(x, y, radio, ngulo inicial, ngulo final, sentido de giro)Donde los parmetros (x,y) son las coordenadas del centro de la circunferencia cuyo arco vamos a dibujar. El parmetro radio es el radio de dicha circunferencia. La amplitud del arco ir desde el ngulo inicial al ngulo final en el sentido de las agujas del reloj. Los ngulos se miden en radianes. La equivalencia con los grados nos la da esta expresin: radianes = (Math.PI/180)*grados. Donde Math.PI es el nmero Pi (3,1416...)EjemploArco desde 0 grados hasta 90 grados en sentido contrario de las agujas del relojcontexto.beginPath(); contexto.arc(200,60,50,radianes('0'),radianes('90'),true);contexto.stroke();

Trabajo realizado con canvasEn este archivo disee una carita usando las opciones de canvas el cual el cdigo es este:

creando una carita con canvas

Tu navegador no soporta canvas. Actualizalo

{var c=document.getElementById("tutorial");var cxt=c.getContext("2d");cxt.fillStyle = 'blue';cxt.strokeStyle=('black');cxt.beginPath();cxt.arc(100,150,50,0,Math.PI*2,true);cxt.closePath();cxt.stroke();cxt.beginPath();cxt.arc(100,150,25,0,Math.PI*2,true);cxt.closePath();cxt.fill();cxt.beginPath(); cxt.arc(300,150,50,0,Math.PI*2,true);cxt.closePath();cxt.stroke();cxt.beginPath();cxt.arc(300,150,25,0,Math.PI*2,true);cxt.closePath();cxt.fill();cxt.beginPath();cxt.arc(200,210,200,0,Math.PI*2,true);cxt.closePath();cxt.stroke();

cxt.beginPath();cxt.arc(200,250,50,radianes('18'),radianes('155'));cxt.stroke();} function radianes(grados){var radianes = (Math.PI/180)*grados;return radianes;}

El cual es el resultado es este mostrado en el navegador

En este ejercicio tenamos que desarrollar un triangulo con el fondo verde y el contorno de otro color

Este es el cdigo:

Ejemplo2 Canvas

function mikeCanvas(){var pudin = document.getElementById('miCanvas');var arbol = pudin.getContext('2d');arbol.fillStyle = 'green';arbol.strokeStyle=('red');arbol.beginPath();arbol.moveTo(250,50);arbol.lineTo(200,150);arbol.lineTo(300,150);arbol.fill();arbol.beginPath();arbol.moveTo(250,50);arbol.lineTo(200,150);arbol.lineTo(300,150);arbol.closePath();arbol.stroke(); }

Su navegador es nena :P.