Calculadora de aras Triangulo, rectángulo y circunferencia con JS

Areas de ...

Ejercicio de representación de areas

En la siguiente práctica he realizado una calculadora de áreas utilizando java Script. Puedes seleccionar la circunferencia, rectángulo o triangulo.

Una vez seleccionado introducir la base y altura o radio. Daremos al boton de calc y nos parece en la parte inferior el área

FORMULAS UTILIZADAS
1. triangulo ==> b*h/2
2. Rectángulo ==> b * h
3. circulo ==> π * r2

FIGURA BASE ALTURA RADIO

Aquí te dejo el código utilizado

Puedes descargar aquí el código desde Git. https://github.com/cvdgp/calculadora-de-areas.git

O verlo desde codePen

See the Pen calculadora áreas by CVDGP (@cvdgp) on CodePen.

SVG

GENERA GRAFICOS VECTORIALES CON <svg>

Un grafico vectorial es un dibujo esclable a cualquier tamaño, es una forma de generar dibujos de una forma muy ligera para el navegador y mucho más simple que canvas. El contenedor sgv es muy útil para gnerar dibujos de textos, circulos, cuadrados.
En primer lugar abriremos una eqiqueta sgv y dentro de ella podrmos incluir el resto de equetas

<text>

Cargaremos textos dentro de nuestro contenedor sgv. Los atributos x e y marcaran el punto en el que se situa nuestro dibujo.El atributo fill lo utilizaremos para indicar el color del relleno.

<rect>

Lo utilizaremos para generar un rectangulo. El atributo stroke sera el borde de nuestra imagen.

<circle>

Crea un circulo, para posicionarlo tenemos los atribuyos cx y cy, para definir el tamaño tenemos el atributo r que representa el rádio de nuestro circulo y para definir el grosor del borde tenemos stroke-width

<line>

Crearemos un linea, x1 y y1 marcará el punto en el que iniciamos nuestra línea, mientras x2 e y2 marca el fin de la línea.

<ellipse>

Es una figura geométrica parecida a un circulo pero no tiene un radio regular. utilizaremos los atributos cx y cy para situar la elipse y utilizaremos rx y ry para darle forma a nuestra elipse.

<polyline>

Una poli linea es un conjunto de líneas, utilizaremos el atributo points para darle los puntos x,y en los que inicia cada línea (points="20,20 40,25 60,40"). En la siguiente imágen crearemos dos polilíneas con un texto superpuesto y un elipse.

Degradados <defs> DEGRADADO CIRCULAR

<tspan>

Podemos utilizar esta etiqueta para insertar textos dentro de una etiqueta text.