JavaScript xdiseñadores

Canvas

SVG es un estándar basado en XML mientras que Canvas es una nueva etiqueta HTML5, es creado mediante <canvas></canvas> y su contenido es completado con Javascript.

Canvas, es un lienzo con atributos de ancho y alto (width, height), el valor por defecto del canvas si no se especifica el alto y ancho es 300x150px, al canvas puede aplicarse cualquier elemento HTML como borde, margen, fondo o clase, pero para identificarlo es mejor usar id.:

<canvas id="ejemplo" width="150" height="150"></canvas>

Para navegadores antiguos que no soportan esta etiqueta, es posible utilizar un contenido alternativo, basta con incluiro dentro de la etiqueta canvas, una imagen, un texto...

<canvas id="canvas" width="150" height="150">
Este navegador no soporta CANVAS
</canvas>

<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

Esta característica puede emplearsde para hacer accesible el canvas.

El lienzo igual que la escena de Flash, las coordenadas (0,0) están en la parte superior izquierda y las unidades de medida son pixel.

Dibujar formas básicas 2D

Dibujar dentro del canvas, usando scrpts, normalmente javascript y el id del canvas.

Para mostrar algo en el canvas, es necesario emplear getContext() que obtiene el contextde representación y sus funciones de dibujo.

var canvas = document.getElementById('id_del_canvas');
var ctx = canvas.getContext('2d');

Puede comprobarse si el navegador soporta canvas con un if.

var canvas = document.getElementById('id_del_canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// código de dibujo aquí
} else {
// Código para los navegadores que no soporten CANVAS, aquí
}

- fillRect(x,y,width,height) : Dibuja un rectángulo con relleno
- strokeRect(x,y,width,height) : Dibuja un contorno rectangular
- clearRect(x,y,width,height) : Borra el área especificada y hace que sea totalmente transparente

Relleno de color
- fillStyle = "rgb(200,0,0)";

Define el color de relleno

var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,200,0)";
ctx.fillRect (10, 10, 200, 100);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 100, 100);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

Dibujar líneas

Internamente, las rutas se almacenan como una lista de sub-rutas (líneas, arcos, etc) que en conjunto forman una forma

- BeginPath(): comenzamos a dibujar una forma
- ClosePath():  cierra la forma al trazar una línea recta desde el punto actual al principio. Si la forma ya se ha cerrado o no hay un solo punto en la lista esta función no hace nada.

- Stroke() : Se utiliza para dibujar una forma con contorno
- fill() : Se utiliza para pintar una forma sólida

Nota: Al llamar al método fill(), las formas abiertas se cerrarán automáticamente y no es necesario utilizar el método ClosePath().

Coordenadas del pincel

- MoveTo(x, y): Equivale a levantar el pincel de un punto y colocarlo en el siguiente.

La función moveTo toma dos argumentos, x e y, que son las coordenadas del nuevo punto de partida.

Líneas

- lineTo(x, y): Es un método que nos permitirá dibujar una línea recta.

Este método toma dos valores  x e y, que son las coordenadas del punto final de la línea.

El punto de partida depende de los trazados anteriores, donde el punto final de la ruta anterior es el punto de partida para la siguiente, etc. El punto de partida también se puede cambiar mediante el método moveTo().

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<script type="application/javascript">
function draw(){
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
}
</script>
</head>
<body onLoad="draw();">
<canvas id="canvas" width="200" height="200">
</canvas>
</body>
</html>

 

Arcos

- arc(x, y, radius, startAngle, endAngle, anticlockwise): Dibuja arcos o circulos.

La x e y son las coordenadas del centro del círculo. Radius es el radio. El startAngle y endAngle definen los puntos inicial y final del arco en radianes. El ángulo de inicio y cierre se miden desde el eje x. El anticlockwise es un valor booleano que cuando es true señala en el sentido contrario  de las agujas del reloj, si es false en el sentido de las agujas del reloj.

Nota: Los ángulos en la función arc se miden en radianes, no en grados. Un ángulo de 360º equivale a 2 PI radianes, para convertir grados a radianes se puede utilizar la siguiente expresión JavaScript:

var = radianes (Math.PI/180) * grados.

Rectángulos

- rect(x, y, width, height): Este método necesita cuatro valores, x e y definen las coordenadas de la esquina superior izquierda del rectángulo, width y height definen la anchura y la altura.

Imágenes

Las imágenes externas se pueden utilizar en cualquier en formato estándar de la Web: PNG, GIF o JPEG.

Para dibujar imágenes usaremos la función drawImage que es un método disponible en el canvas.

var canvas, context;
canvas = document.getElementById("id_del_canvas");
context = canvas.getContext('2d');
context.drawImage(image, x, y);
var imagen = new Image();
imagen.src = "ruta/nombre_imagen.jpg";

Hay tres formas de llamar a la función:

Dibujándola sin más:

context.drawImage(imagen, x, y);

Nombre de referencia del objeto y posición x e y

Re-escalando la imagen, indicando ancho y alto:

drawImage(image, x, y, width, height);

Por último

drawImage(image, sx, sy, swidth, sheight, dx, dy, dWidth, dHeight);

Primer parámetro: Igual que los anteriores.
Segundo parámetro “sx”: Posición X dentro de nuestra imagen en la que queremos empezar la selección a recortar.
Tercer parámetro “sy”: Posición Y dentro de nuestra imagen en la que queremos empezar la selección a recortar.
Cuarto parámetro “swidth”: Ancho de la selección a recortar.
Quinto parámetro “sheight”: Alto de la selección a recortar.
Sexto parámetro “dx”: Posición en el eje X que queremos dibujar nuestra imagen dentro del elemento canvas.
Séptimo parámetro “dy”: Posición en el eje Y que queremos dibujar nuestra imagen dentro del elemento canvas.
Octavo parámetro “dWidth”: Ancho que queremos que tenga la imagen recortada en el canvas.
Noveno parámetro “dHeight”: Alto que queremos que tenga la imagen recortada en el canvas.

Imagen

Veamos un ejemplo completo:

<html>
<head>
<title>Cargar imagen en un Canvas de HTML5</title>
<script type="text/javascript">
window.onload = function() {
var PintaCanvas = document.getElementById("ejemplo");
// inicializo para "dibujar" en 2D
var contexto = PintaCanvas.getContext("2d");
//cargo la imagen y lo asigno al canvas
var Imagen = new Image();
Imagen.src = "chagall.jpg";
//uso una función onload para que pinte la imagen una vez que ha sido descargada en el navegador
Imagen.onload = function() {
//uso el contexto del canvas y el metodo drawimage para cargar el objeto y la posición x e y
contexto.drawImage(Imagen, 0, 0 );
}
}
</script>
</head>
<body>
<canvas id="ejemplo" width="200" height="200">
<p>tu navegador no soporta canvas.</p>
</canvas>
</body>
</html>

Usando imágenes de la misma página
document.images: accedemos a todas las imágenes de la pagina
document.getElementsByTagName: accedemos a las imágenes mediante el tag
document.getElementById: si conocemos el ID de la imagen-

Colores

Hay dos colores posibles, fillStyle y strokeStyle, para el color del relleno y el borde, se puede identificar el color, por nombre, hexadecimal, rgb y rgb con tranparencia:

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

Estilos de línea

La línea puede definirse el grosor:

lineWidth = valor

el tipo de terminación; but, round o square:

lineCap = type

La apariencia de las esquinas; round, level o miter:

lineJoin = type

Ver mas en: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors