En algún momento de la vida tuvimos un curso de Matemáticas; las coordenas cartesianas fue uno de esos temas, donde se gráfica las diferentes funciones (lineales, logaritmicas, trigonométricas, etc.) por eso es que nos resultara un poco incómodo trabajar en las coordenadas del elemento canvas, ya que el desplazamiento del nuestros vectores o dibujos serán hacia abajo, por eso es que tenemos que acostumbrarnos, en la siguiente figura se muestra la diferencia:
Dejar claro lo que son las coordenadas en canvas nos ayudaran a entender más acerca de todo lo que se podrá hacer en el futuro, con el paso de estos tutoriales veremos la importancia de tener esto en cuenta.
Como mencionamos el elemento canvas utiliza JavaScript para funcionar, es el que nos hara toda la magia que encierra html5. Si no conoces este lenguaje de programación será un poco difícil, pero no imposible, ya que pondré empeño en publicar algunos temas de importancia que concuerden con el tema.
Antes de dibujar debemos hacer referencia, donde se encuentra nuestro elemento canvas que viene con las etiquetas
<canvas id="myCanvas"></canvas>, el modo en adquirimos su contexto bidimensional es de la siguiente forma:
var canvas = document.getElementById('myCanvas');//Accedemos al DOM mediante su id getElementById
var context = canvas.getContext('2d');//Obtenemos con contexto Comensemos dibujando una linea, por cual utilizaremos beginPath, context.moveTo, context.lineTo, context.lineWidth, context.strokeStyle y context.stroke.
beginPath es un metodo que permite decir: que se comenzara a realizar el dibujo; context.moveTo nos permite declarar en donde empezaran nuestras cordenadas y context.lineTo el final de esta linea; context.lineWidth nos dira el grosor de nuestra lineas; context.strokeStyle y context.stroke nos permitiran poner el color que queramos. Para dibujar una linea el codigo seria de la siguiente manera:
<!DOCTYPE HTML>
<html>
<head>
<title>DIBUJAR LINEAS</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="250"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 100);
context.lineTo(200, 200);
context.lineWidth = 5;
// set line color
context.strokeStyle = '#ff0000';
context.stroke();
</script>
</body>
</html>
La forma de la linea nos quedara como se muestra en la figura que a continuacion se presenta:
Pero aquí no queda todo por hacer, y ver una línea muy limitada que no ayude en nada, sin embargo, podemos imaginarnos infinidad de cosas:
El codigo del degradado o tapiz es el siguiente:
<!DOCTYPE HTML>
<html>
<head>
<style>
#myCanvas{
background:#333;}
</style>
</head>
<body>
<canvas id="myCanvas" width="1054" height="1000"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function uno(){
//Comienza de la primeras lineas horizontalmente.
//Declaramos nuestras variables x,y,xp,yp.
//Introduce la variable incre la cual nos permitira sumar
//a la cordenada Y anterior.
var incre=30;
var x=1;
var y=10;
var xp=1054;
var yp=10;
for(var i=0;i<30;i++){
context.beginPath();
//el primer valor de Y sera 40; al siguiente regreso aumentara 30px
//con incre 30 y sera 70
context.moveTo(x, y=y+incre);
context.lineTo(xp, yp=yp+incre);
context.lineWidth=2;
context.stroke();
context.strokeStyle = 'yellow';
context.stroke();
}}
function dos(){
//Comienza de la segunda lineas verticalmente.
var incre=30;
x=10;
y=1;
xp=10;
yp=1000;
for(var i=0;i<30;i++){
context.beginPath();
context.moveTo(x=x+incre, y);
context.lineTo(xp=xp+incre, yp);
context.lineWidth=2;
context.stroke();
context.strokeStyle = 'yellow';
context.stroke();
}
}
uno();
dos();
</script>
</body>
</html>
Utilizamos el ciclo de estructura de control FOR para poder imprimir las líneas que quisiéramos. Para poder recorrer las líneas en sus coordenadas utilizamos la variable incre, para moverlas cada 30px. Si usted no sabe a un lo que está pasando, puede poner un alerta dentro del bucle del ciclo de FOR de la siguiente forma la cual nos servirá para entender con rapidez.
alert("el valor de x es:"+x+" el valor de y es: "+y);
Si jugamos un poco con nuestro bucle de control y tomamos la variable i, podremos incrementar el ancho de nuestra linea:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
x=10;
y=1;
xp=10;
yp=1000;
incre=30;
for(var i=0;i<30;i++){
context.beginPath();
context.moveTo(x=x+incre, y);
context.lineTo(xp=xp+incre, yp);
context.lineWidth=5+i;/*incrementamos el ancho de nuestra linea*/
context.stroke();
context.strokeStyle ="#33FFFf";
context.stroke();
}
El incremento del ancho de linea se notara un poco; es cuestion de que uno empiece a jugar con lo valores de color, de tamaño y la inclinacion de nuestra lineas.
Ya por ultimo utlizaremos el el ajuste de color RGBA su significado viene de rojo, verde, azul y alfa. Alfa es el que nos permitira tener transparencias en nuestros colores, este valor es solo de 0 a 1. Los otros valores RGB viene de 0 a 255.
rgba(255, 153, 0, 0.5)
Como vemos en la siguiente figura que se muestra el trabajo de opacidad de RGBA.
Asi quedaría nuestro codigo:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function uno(){
//Comienza de la primeras lineas horizontalmente.
//Declaramos nuestras variables x,y,xp,yp.
//Introducimos la variable incre la cual nos permitira sumar
//a la cordenada Y anterior.
var incre=30;
var x=1;
var y=10;
var xp=1054;
var yp=10;
for(var i=0;i<30;i++){
context.strokeStyle = "rgba(255, 153, 0, 0.5)";
context.beginPath();
//el primer valor de Y sera 40; al siguiente regreso aumentara 30px
//con incre 30 y sera 30
context.moveTo(x, y=y+incre);
context.lineTo(xp, yp=yp+incre);
context.lineWidth=10;
context.stroke();
context.strokeStyle = "rgba(255, 153, 0, 0.5)";
context.stroke();
}}
function dos(){
//Comienza de la segunda lineas verticalmente.
var incre=30;
x=10;
y=1;
xp=10;
yp=1000;
for(var i=0;i<30;i++){
context.strokeStyle ="rgba(51, 187, 241, 0.5)";
context.beginPath();
context.moveTo(x=x+incre, y);
context.lineTo(xp=xp+incre, yp);
context.lineWidth=10;
context.stroke();
context.stroke();
}}
uno();
dos();
Para poder convertir nuestros colores hexadecimales a rgba accedemos a conversión.
Hasta este momento podemos observar el poder que tiene el elemento canvas de html5 con ayuda de javascript, y el ciclo de control For que hace todo el trabajo. Había contemplado recorrer en un solo tutorial, todo los elementos que conforman canvas, pero, esto se estenderia mucho, asi es que nos veremos en la proxima.
