Anda di halaman 1dari 4

TALLER API’s CANVAS, TEXTO, IMAGEN

Una empresa le solicita a usted como programador una pagina web dinámica que
contenga diferentes tipos de texto, imágenes geométricas y manejo de imágenes.
Los solicitado por la empresa es lo siguiente:

1. Crear un titulo con el nombre de la empresa (a su eleccion) que por letra


intercalada una se vea transparente y otras con color de relleno y que la
primera y la ultima letra tengan sombra.
2. El contenido de texto de la pagina tenga un menú donde me lleve a las
diferentes partes de la empresa, este texto tendrá tipo periódico y por
columnas.(home, mapa del sitio, quienes somos, etc.) este es solo un
ejemplo.

3. CANVAS HTML5: FORMAS


Los siguientes métodos serán necesarios para dibujar formas
en canvas html5

N
MÉTODO Y DESCRIPCIÓN
º

beginPath()
1
Este método resetea la forma actual

moveTo(x, y)
2 Este método inicia o enlaza el contorno de la forma
con el punto dado

closePath()
3
Este método indica que la forma actual está cerrada

fill()
4 Este método rellena la forma actual con el estilo de
relleno actual

stroke()
5 Este método dibuja el contorno de la forma actual
con el estilo de contorno actual
N
MÉTODO Y DESCRIPCIÓN
º

arc(x, y, radio, anguloInicio, anguloFinal,


sentidoAntiHorario)
Enlaza un nuevo punto indicado con x e y con el
último punto del contorno dibujado. Estos puntos se
6
unirán bajo un arco descrito por la circunferencia de
un círculo dado, empezando por el ángulo de inicio y
acabando por el ángulo final. Este será recorrido por
la dirección dada.
Utilizando este método la empresa le pide que su logo sea el siguiente pero
que sea dibujado por un método en JavaScript

4. CANVAS HTLM5: LINEAS


Las lineas en canvas siguen los mismos métodos que las
formas, así que nos podremos fijar en la tabla anterior para
utilizar los métodos necesarios para los ejemplos de más
abajo. Además de los métodos anteriores os mostramos otro
sencillo método para dibujar lineas.

N
MÉTODO Y DESCRIPCIÓN
º

1 lineTo(x, y)
Este método dibuja desde el punto anterior hasta el
punto dado por x e y, conectando ambos con una
N
MÉTODO Y DESCRIPCIÓN
º

linea recta.

5. Las lineas dibujadas están sujetas a una clase de propiedades


que definen los estilos de las mismas. Estas vienen fijadas
por los siguientes atributos

N
PROPIEDAD Y DESCRIPCIÓN
º

lineWidth [ = valor ]
1
Esta propiedad devuelve el ancho de linea actual.

lineCap [ = valor ]
Esta propiedad devuelve el estilo del extremo de
2
linea actual. Los posibles estilos son butt, round y
square

lineJoin [ = valor ]
3 Esta propiedad devuelve el estilo del enlace de linea
actual. Los posibles estilos son bevel, round y miter

miterLimit [ = valor ]
4 Esta propiedad devuelve el ratio del angulo mínimo
de linea actual.
Utilizando el método anterior el resultado será el siguiente:
6. El nombre de la empresa debe ir con el siguiente tipo de letra en donde en
la parte derecha usted colocara la carita feliz y en la izquierda la imagen
mostrada.

7. Luego colocar una imagen y que se vea como la siguiente: