Las etiquetas <canvas> y <svg> permiten crear un espacio para dibujar programando en él.
Vemos a continuación cuatro tutoriales para ayudarnos a aprender a dibujar programando directamente en este lenguaje html.
Tutorial 1: canvas y javascript
El videotutorial
siguiente nos explica cómo crear un icono personalizado usando únicamente
Canvas y
Javascript.
Trabajamos dentro de body:
1. Canvas
Creamos la etiqueta canvas y entre la de apertura y la de cierre indicamos "Tu navegador no soporta canvas". Dentro de la de inicio, describimos el canvas: podemos determinar nombre (id), tamaño ancho x alto, estilo (borde y color).
2. Script
Creamos la etiqueta script. Dentro creamos dos variables, var. Una será la de .getElementById y la otra será la de .getcontext.
3. Círculos .arc()
Seguimos dentro de las etiquetas de apertura y cierre Script.
Creamos los círculos, con el bloque de comandos siguiente:
- fillStyle="color";
- beginPath();
- arc(xcentro,ycentro,radio,Math.PI,Math.PI*2,true);
- closePath();
- fill();
El resultado es el siguiente:
Tutorial 2
En otro
tutorial había variantes, tal como explico a continuación:
Dentro de la especificación del Canvas de HTML5 no existe ningún método que nos dibuje un círculo directamente, sino que nos ofrece un método que dibuja arcos, con la función .arc()
"void arc (in float x, in float y, in float radius, in float starAngle, in float endAngle, in boolean anticlockwise Optional);
180 grados = PI radianes
Si queremos trabajar en grados, hay que utilizar la siguiente ecuación (PI/180)*grados
Para especificar 90º sería: (Pi/180)*90
Para trazar un arco en la dirección de las agujas del reloj, damos el valor "false".
Así un arco que vaya de 0 a 270 grados se escribiría:
ctx.arc (100,70,50,0,(Math.PI/180)*270, true);
Un arco completo tendría 360 grados:
ctx.arc(100,70,50,0,(Math.PI/180)*360,true);
3.1. Relleno: .fillStyle y .fill()
Debajo del arco, indicamos que esté rellenado:
Propiedad de relleno (color):
ctx.fillStyle="#f99";
Método de relleno (función):
ctx.fill();
3.2. Borde al círculo:.strokeStyle, .lineWidth, .stroke
Propiedad de color : ctx.strokeStyle="#f00";
Propiedad de grosor: ctx.lineWidth=10;
Método línea: ctx.stroke();
Así podemos hacer imágenes como ésta:
Tutorial 3
En este
tutorial, vemos:
En
Body,
creamos la etiqueta
<section id=" "> que llamaremos "dibujo".
Dentro, creamos la etiqueta <canvas> que llamaremos "lienzo". Dentro de la etiqueta de apertura incluiremos id=" " width=" " y height=" ". Las comillas sirven para poder escribir dentro con espacios.
La diferencia mayor entre <canvas> y <svg> es que no todos los navegadores soportan <canvas>, por eso suele usarse más svg y en caso de usar <canvas>, conviene poner el aviso en texto "Su navegador no soporta el elemento html5 canvas entre las etiquetas de apertura y cierre de canvas.
Podemos modificar el canvas escribiendo las variables siguientes dentro de la etiqueta de apertura:
1. Color de contorno: StrokeStyle
2. Color de relleno: FillStyle
3. Transparencia de las figuras del lienzo 0 (opaco) a 1 (transparente): globalAlpah
En Head,
entre las etiquetas de apertura y cierre de Head, debajo de la etiqueta <Title>, vamos a abrir dos etiquetas distintas: Style y Script. Cada una con su apertura y su cierre.
<Style> es la hoja de estilo. Emplea lenguaje .CSS
<Script> dibuja las figuras en lenguaje JavaScript. Hay que indicar los comandos que se ven en la imagen:
En JavaScript, para dibujar cada figura debemos empezar por el nombre del lugar donde la pondremos (lienzo.) seguido de los comandos siguientes:
beginPath(); comienza la figura
closePath(): termina la figura
Y dentro de cada Path, la función matemática que corresponda (siempre delante lienzo.):
MoveTo (x, y): mueve el cursor lápiz a las coordenadas marcadas.
LineTo (x,y): genera la línea recta desde la posición inicial, a la indicada en LineTO.
Rect (x,y, ancho, alto): genera un rectángulo.
Arc (x, y, radio, ángulo inicial en radianes, ángulo final, dirección)
BezierCurveTo (a, b, c, d, x, y): genera una curva bezier cúbica
QuadraticCurveTo (a, b, x, y): genera una curva bezier cuadrática.
Así hemos indicado qué tipo de figura queremos.
Para que el navegador dibuje las figuras que le acabamos de indicar, falta decirle que lo haga. Y podemos hacerlo, de tres formas:
- Stroke(): contorno
- Fill() : Silueta, relleno
- Clip(): Máscara, con la forma indicada, de modo que, de lo dibujado, sólo se verá lo que queda dentro de esa máscara; es como una ventana, que deja ver sólo lo que haya debajo de esa forma y dentro de ella. Oculta el resto.
Tutorial 4.
5. Otro tutorial:
En el siguiente
tutorial vemos formas básicas más en detalle:
Rectángulos:
En el body:
Primero, definimos nombre, ancho, alto, estilo - borde y color- del canvas.
Luego, en la etiqueta script definimos las variables "getElementByID" y "getContext", tal como vemos en la imagen siguiente, y pasamos a indicar las formas rectangulares, tal como vemos en las imágenes siguientes:
Línea:
Curvas Bezier:
