Eje de coordenadas en Canvas HTML5

En el ejemplo de hoy vamos a ver cómo podemos crear un eje de coordenadas en Canvas HTML5 para que visualmente se puedan situar los ejes y sus valores. Esto nos ayudará a que posteriormente podamos incluir elementos gráficos en base a coordenadas para que queden representados dentro del canvas.

Crear el Canvas

Lo primero será crear nuestro canvas dentro de la página web.

<h1>Ejes Coordenadas</h1>
<canvas height="600px" width="1000px" id="micanvas">
    Su navegador no soporta en elemento CANVAS
</canvas>

Utilizaremos el nombre dado en el canvas mediante el atributo id y el método .getElementById() para obtener una referencia al canvas y así obtener su contexto mediante .getContext(). Será sobre este contexto dónde empezaremos a crear nuestro eje de coordenadas.

var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
let alto = canvas.height;
let ancho = canvas.width;

Además aprovechamos para guardarnos el alto y el ancho del canvas.

Configurando el Canvas

Ahora pasaremos a calcular una serie de valores que nos van a servir para dibujar el eje de coordenadas.

grid_size, el tamaño de los cuadros del grid.
y_axis_size, tamaño del eje de coordenadas y.
x_axis_size, tamaño del eje de coordenadas x.
y_cero, x_cero, coordenada 0,0 del eje de coordenadas.

var grid_size = 20;
var x_axis_size = ancho-(2*grid_size);
var y_axis_size = alto-(2*grid_size);
var x_cero = 500;
var y_cero = 300;

Creando el Grid

Lo siguiente será crear el grid, es decir, la cuadrícula sobre todo el canvas para que pueda verse como base del canvas. Lo que hacemos es trazar líneas horizontales desde el 0 hasta el ancho del canvas y líneas verticales desde el 0 hasta el alto del canvas. Para ello lo que hacemos es utilizar dos bucles for y creando líneas mediante los métodos .moveTo() y .lineTo().

Es importante ver que el incremento de las líneas es en base del grid_size que hemos definido al inicio.

function grid(ctx) {
    ctx.beginPath();
    // Cuadriculas X
    for (var x=0; x<=ancho; x=x+grid_size){
        ctx.moveTo(x,0);
        ctx.lineTo(x,alto);
    }
    
    // Cuadrículas Y
    for (var y=0; y<=ancho; y=y+grid_size){
        ctx.moveTo(0,y);
        ctx.lineTo(ancho,y);
    }
    
    // Mueves el pencil y luego persistes con stroke
    ctx.strokeStyle = "#dcdcdc";
    ctx.lineWidth=1;
    ctx.stroke();
}

Vemos que una vez trazadas las líneas hay que forzar que se muestren mediante el método .stroke().

Creando el eje de coordenadas

El siguiente paso va a ser crear el eje de coordenadas tanto el eje x como el eje y. Para ello vamos a movernos desde el centro menos la mitad inferior del eje hasta el cero más la mitad superior del eje. Eso lo haremos tanto para el eje x como para el eje y.

// Eje x del 0
ctx.beginPath();
ctx.moveTo(x_cero-(x_axis_size/2),y_cero);
ctx.lineTo(x_cero+(x_axis_size/2),y_cero);

// Eje y del 0
ctx.moveTo(x_cero,y_cero-(y_axis_size/2));
ctx.lineTo(x_cero,y_cero+(y_axis_size/2));

ctx.strokeStyle = "#000";
ctx.lineWidth=2;
ctx.stroke();

Para que no nos quede el eje muy simple lo que vamos a hacer es añadirle los valores de las coordenas. Esto nos servirá también para cuando añadamos elementos visualizar de mejor manera las coordenas.

Al igual que hacíamos con los ejes rellenaremos primero desde el 0 hasta la posición superior y luego desde el 0 hasta la posición inferior. Esto lo haremos en los dos ejes, quedándonos el código de la siguiente manera:

// Ponemos números
ctx.font = "bold 10px sans-serif";

// Los de Y
let x = 0;
while (x*grid_size <= (y_axis_size/2)) {
    ctx.textAlign = "end";
    ctx.fillText(x,x_cero-(grid_size/4),y_cero-(grid_size*x));
    x++;
}

x = 1;
while (x*grid_size <= (y_axis_size/2)) {
    ctx.textAlign = "end";
    ctx.fillText(-x,x_cero-(grid_size/4),y_cero+(grid_size*x));
    x++;
}

// Los de X

x = 1;
while (x*grid_size <= (x_axis_size/2)) {
    ctx.textAlign = "end";
    ctx.fillText(x,x_cero+(grid_size*x),y_cero+(grid_size/2));
    x++;
}   

x = 1;
while (x*grid_size <= (x_axis_size/2)) {
    ctx.textAlign = "end";            
    ctx.fillText(-x,x_cero-(grid_size*x),y_cero+(grid_size/2));
    x++;
}

Vemos que la propiedad .font nos ayuda a definir el tipo de texto a utilizar y el método .fillText() nos permite añadir el texto. Este método es el que recibe la coordenada.

Así ya tendremos construido nuestro eje de coordenadas en Canvas HTML5. Espero que os sea de utilidad para vuestras gráficas.

Twittear

0 Compartir

Eje de coordenadas en Canvas HTML5