martes, 9 de septiembre de 2014

HTML5 - Dibujando Formas con canvas II

Posted by daycry at 13:43 Labels: ,

Lineas

Para dibujar líneas rectas, utilice el método lineTo().
lineTo (x, y) 

Dibuja una línea desde la posición de dibujo actual hasta la posición especificada por x e y. 
Este método toma dos argumentos, x e y, que son las coordenadas del punto final de la línea. El punto de partida depende de caminos previamente dibujadas, donde el punto final de la trayectoria anterior es el punto de partida para la siguiente, etc El punto de partida también se pueden cambiar usando el método moveTo(). 
El siguiente ejemplo dibuja dos triángulos, uno lleno y otro esbozado.
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25,25);
    ctx.lineTo(105,25);
    ctx.lineTo(25,105);
    ctx.fill();

    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(125,125);
    ctx.lineTo(125,45);
    ctx.lineTo(45,125);
    ctx.closePath();
    ctx.stroke();
  }
}

Así se inicia llamando beginPath() para iniciar un nuevo trazado de forma. A continuación, utilizamos el método moveTo() para mover el punto de partida hasta la posición deseada. Por debajo de este, se trazarán dos líneas que forman dos lados del triángulo.

Se dará cuenta de la diferencia entre el triángulo relleno y bordeado. Esto es, como se mencionó anteriormente, debido a que formas se cierran automáticamente cuando se llena un camino, pero no cuando están contorneados. Si no usamos la función closePath() para el triángulo con trazo, sólo dos líneas se han dibujado, y no cerrará para dibujar el triángulo completo.

Arcs

Para dibujar arcos o círculos, se utiliza el método de arc(). También puede utilizar arcTo(), pero sus implementaciones son algo menos fiable, por lo que no entraremos en ese tema. 

arc(x, y, radius, startAngle, endAngle, anticlockwise)
Dibuja un arco. 

Este método toma cinco parámetros: x e y son las coordenadas del centro del círculo en que deberían proceder del arco. radio es autoexplicativo. Los parámetros startAngle y endAngle definen los puntos inicial y final del arco en radianes, a lo largo de la curva del círculo. Estos se miden desde el eje x. El parámetro hacia la izquierda es un valor booleano que, cuando es verdadero, dibuja el arco hacia la izquierda; de lo contrario, el arco se dibuja en sentido horario. 

Nota: Los ángulos de la función arc() se miden en radianes, no en grados. Para convertir grados a radianes puede utilizar la siguiente expresión de JavaScript: radianes = (Math.PI / 180) * grados. 

El siguiente ejemplo es un poco más complejo que los que hemos visto anteriormente. Dibuja 12 arcos diferentes, todos con diferentes ángulos y rellenos. 

Los dos bucles for son para recorrer a través de las filas y columnas de los arcos. Para cada arco, empezamos un nuevo camino llamando beginPath(). En el código, cada uno de los parámetros para el arco está en una variable para mayor claridad, pero no sería necesariamente hacer eso en la vida real. 

Las coordenadas X e Y deben ser lo suficientemente claro. radio y startAngle son fijos. El endAngle comienza en 180 grados (medio círculo) de la primera columna y se incrementa en pasos de 90 grados, que culminó en un círculo completo en la última columna. 

La declaración de los resultados de los parámetros hacia la derecha en la primera y tercera fila se dibuja como arcos hacia la derecha y la segunda y la cuarta fila como arcos en sentido anti horario. Por último, la sentencia if hace que la mitad superior se acarició arcos y los arcos de medio fondo llenas. 

Nota: En este ejemplo se requiere un lienzo ligeramente más grande que los otros en esta página: 150 x 200 píxeles.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    for(var i=0;i<4;i++){
      for(var j=0;j<3;j++){
        ctx.beginPath();
        var x              = 25+j*50;               // x coordinate
        var y              = 25+i*50;               // y coordinate
        var radius         = 20;                    // Arc radius
        var startAngle     = 0;                     // Starting point on circle
        var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
        var anticlockwise  = i%2==0 ? false : true; // clockwise or anticlockwise

        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

        if (i>1){
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}


Bezier y curvas cuadráticas 


El siguiente tipo de rutas disponibles son las curvas de Bézier, disponibles en ambas variedades cúbicas y cuadráticas. Estos se utilizan generalmente para dibujar formas orgánicas complejas.

quadraticCurveTo (cp1x, cp1y, x, y) 

 Dibuja una curva Bézier cuadrática de la posición actual de la pluma hasta el punto final especificado por x e y, utilizando el punto de control especificado por cp1x y cp1y.

bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y) 

 Dibuja una curva Bézier cúbica desde la posición actual del lápiz hasta el punto final especificado por x e y, utilizando los puntos de control especificados por (cp1x, cp1y) y (cp2x, cp2y).

La diferencia entre éstos se puede describir utilizando la imagen de la derecha. Una curva Bézier cuadrática tiene un inicio y un punto final (puntos azules) y un solo punto de control (indicado por el punto rojo), mientras que una curva cúbica de Bézier usa dos puntos de control.

Los parámetros X e Y en ambos de estos métodos son las coordenadas del punto final. cp1x cp1y y son las coordenadas del primer punto de control, y cp2x cp2y y son las coordenadas del segundo punto de control.

Utilizando las curvas de Bézier cuadráticas y cúbicas puede ser bastante difícil, porque a diferencia del software de dibujo vectorial como Adobe Illustrator, no tenemos información visual directa en cuanto a lo que estamos haciendo. Esto hace que sea muy difícil de dibujar formas complejas. En el siguiente ejemplo, vamos a dibujar algunas formas orgánicas simples, pero si usted tiene el tiempo y, sobre todo, la paciencia, mucho más complejas formas se pueden crear.


No hay nada muy difícil en estos ejemplos. En ambos casos vemos una sucesión de curvas está elaborando lo que finalmente resulta en una forma completa.

Curvas cuadráticas de Bézier 

Este ejemplo utiliza varias curvas cuadrática de Bézier para hacer un globo de diálogo. 
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // Quadratric curves example
    ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.quadraticCurveTo(50,120,30,125);
    ctx.quadraticCurveTo(60,120,65,100);
    ctx.quadraticCurveTo(125,100,125,62.5);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();
  }
}


Curvas Bézier cúbicas 

En este ejemplo se dibuja un corazón utilizando curvas cúbicas de Bézier. 
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    // Quadratric curves example
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
  }
}


Los rectángulos 

Además de los tres métodos que vimos en rectángulos de dibujo, que dibujan formas rectangulares directamente a la lona, hay también el método rect (), que añade una trayectoria rectangular a un camino abierto.

rect(x, y, width, height)
Dibuja un rectángulo cuya esquina superior izquierda está especificado por (x, y) con el width y height especificados.

Cuando se ejecuta este método, el método moveTo() se llama de forma automática con los parámetros (0,0). En otras palabras, la posición actual de la pluma se restablece automáticamente a las coordenadas por defecto.

Hacer combinaciones 

Hasta ahora, cada ejemplo en esta página ha utilizado un solo tipo de función de trayectoria por la forma. Sin embargo, no hay ninguna limitación en el número o el tipo de caminos que puede utilizar para crear una figura. Así que en este último ejemplo, vamos a combinar todas las funciones de trayectoria para hacer un conjunto de personajes de juegos muy famosos. 
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    roundedRect(ctx,12,12,150,150,15);
    roundedRect(ctx,19,19,150,150,9);
    roundedRect(ctx,53,53,49,33,10);
    roundedRect(ctx,53,119,49,16,6);
    roundedRect(ctx,135,53,49,33,10);
    roundedRect(ctx,135,119,25,49,10);

    ctx.beginPath();
    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
    ctx.lineTo(31,37);
    ctx.fill();

    for(var i=0;i<8;i++){
      ctx.fillRect(51+i*16,35,4,4);
    }

    for(i=0;i<6;i++){
      ctx.fillRect(115,51+i*16,4,4);
    }

    for(i=0;i<8;i++){
      ctx.fillRect(51+i*16,99,4,4);
    }

    ctx.beginPath();
    ctx.moveTo(83,116);
    ctx.lineTo(83,102);
    ctx.bezierCurveTo(83,94,89,88,97,88);
    ctx.bezierCurveTo(105,88,111,94,111,102);
    ctx.lineTo(111,116);
    ctx.lineTo(106.333,111.333);
    ctx.lineTo(101.666,116);
    ctx.lineTo(97,111.333);
    ctx.lineTo(92.333,116);
    ctx.lineTo(87.666,111.333);
    ctx.lineTo(83,116);
    ctx.fill();

    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.moveTo(91,96);
    ctx.bezierCurveTo(88,96,87,99,87,101);
    ctx.bezierCurveTo(87,103,88,106,91,106);
    ctx.bezierCurveTo(94,106,95,103,95,101);
    ctx.bezierCurveTo(95,99,94,96,91,96);
    ctx.moveTo(103,96);
    ctx.bezierCurveTo(100,96,99,99,99,101);
    ctx.bezierCurveTo(99,103,100,106,103,106);
    ctx.bezierCurveTo(106,106,107,103,107,101);
    ctx.bezierCurveTo(107,99,106,96,103,96);
    ctx.fill();

    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(101,102,2,0,Math.PI*2,true);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(89,102,2,0,Math.PI*2,true);
    ctx.fill();
  }
}

// A utility function to draw a rectangle with rounded corners.

function roundedRect(ctx,x,y,width,height,radius){
  ctx.beginPath();
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius);
  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  ctx.lineTo(x+width-radius,y+height);
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  ctx.lineTo(x+width,y+radius);
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  ctx.lineTo(x+radius,y);
  ctx.quadraticCurveTo(x,y,x,y+radius);
  ctx.stroke();
}

No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )