Ejercicio con Tablas HTML
Estos ejercicios tratan sobre el uso del canvas de HTML. Son ejercicios básicos para conocer el elemento y ser capaz de utilizarlo en aplicaciones simples en una página web.
Para poder hacer estos ejercicios vas a necesitar conocer el lenguaje HTML y tener un conocimiento básico de Javascript, tanto en el lenguaje en si mismo como en el uso del objeto DOM para comunicarse con las páginas web.
Sobre el elmeneto canvas tienes información en la sección canvas de este sitio y para los scrips puedes visitar mi otro sitio Aulascript dedicado a javascript
Dibujar una linea recta
En este ejercicio se te pide que crees una linea recta que vaya entre los puntos de coordenadas (50,50) y (350,350). La linea tendrá un grosor de 5 unidades y su color será rojo. Pra verlo pon al canvas un borde negro de 1 px de ancho.
Rectángulo simple
Ahora se trata de dibujar, dentro de un canvas de 300x200, una de las figuras geométricas básicas: un rectángulo sin relleno. O sea un contorno de forma rectangular. El origen del rectángulo lo pones en el punto de coordenadas (50, 50) y las dimensiones serán 150 ancho y 100 de alto. La linea de 5 de ancho y color azul.
Rectángulo relleno
Otra figura básica: en este ejercicio se trata de dibujar un rectángulo relleno. El canvas tendrá unas dimensiones de 300x200, mientras que el rectángulo tendrá una anchura de 15o y un alto de 100. La esquina superior izquiereda estaá en el punto 50,50. El color del relleno lo ponemos en verde.
Un aro o circunferencia
En este ejercicio vas a empezar con las curvas, la vurva básica es la circunferencia: dibuja una en un canvas de 400x400, el radio será de 100 situada en el centro del canvas y el grosor de la linea lo pondremos a 2 en color rojo. Se trata de una circunferencia, no de un círculo, por tanto no va rellena.
Un círculo
Ahora vamos a crear un círculo o disco, algo así como una circunferencia rellena. El canvas a utilizar es de 400x400, para el círculo el radio será de 100 situada en el centro del canvas y el relleno (o sea el color del círculo) será azul.
Elipse
En este ejercicio se pide que, usando un canvas de 400x200, dibujes una elipse horizontal con centro en el centro del canva, los radios son 100 y 60, la linea es azul de 2px de ancho.
Elipse son relleno rojo
En este ejercicio se trata de crear una elipse horizontal en un canvas de 400x200. La elipse se situa en el centro del canvas, siendo seu macho 400 y su alto 200. Será una lipse horizontal y rellena en color rojo
Triángulo
Este ejercicio pide crear una figura diferente a las básicas, concretamente un triángulo. El canvas será de 300x200 y conoces los vértices del triángulo que son: (50,50), (200,50), (50,150). La linea tendrá un grosor de 5 px y en color verde.
Triángulo relleno
Las figuras distintas a las básicas también se pueden rllenar: dibuja un tirángulo relleno en un canvas de 300x200. Los vértices del triángulo son (50,50), (200,50), (50,150) y el relleno será de color azul.
Dibujando texto
Dibuja las plabaras Ejercicio Final verticlamente centradas en un canvas de 300x200. El estilo del texto será negrita y Arial, on un tamaño de 40px. Las letras rellenas, deben ir color azul y situadas a 10x del lado izquierdo del canvas.
