HTML5: Pintado en Canvas!

 

Hoy, gracias a Dmitry Rizshkov (@Intelloware), vamos a conocer un poquito más de cómo podemos pintar en Canvas, y las múltiples y creativas opciones de las que disponemos, para dejar a más de uno o de una con la boca abierta:

 

Canvas es un elemento nuevo en HTML5, utilizado para crear gráficos de secuencias de comandos. Elemento Canvas se basa en la especificación WHATWG.

 


 

Antes de aparecer el elemento Canvas, teníamos HTML, el cual resultaba un problema a la hora de crear gráficos dinámicos en la página web. Para pintar algo, sin Canvas, era necesario implementar algunas soluciones en CSS o usar plugins de terceros como Flash o Java. Con Canvas todo lo que necesitas es poner los elementos en su página y dibujar lo que desees con JScript.

El elemento Canvas no es tan interesante. Para ponerlo en tu página sólo tienes que añadir algo como esto en el cuerpo:

 

<canvas id='canvas'></canvas>

 

Toda la magia reside en el JScript, con el que puedes hacer:

Herramientas de dibujo

  • Rectángulos
  • Arcos
  • Elipses
  • Líneas y trazos
  • Curvas cuadráticas

Efectos

  • Rellenos y trazos
  • Sombras
  • Degradados lineales y radiales
  • Transparencia alfa
  • Composición

Transformaciones

  • Escala
  • Rotación
  • Traslación
  • Transformación de la matriz

 

Y mucho más ...

En este artículo veremos cómo pintar con el elemento Canvas con un sencillo ejemplo. Esta será una aplicación de dibujo simple.Puedes experimentar en línea con la aplicación, disponible aquí. El código fuente se adjunta a lo largo de este post.

Para crear nuestra aplicación de pintura nos falta por completar varios pasos importantes.

  • Ajustes del archivo HTML con el elemento Canvas
  • La creación de un script para pintar en el contexto del Canvas
  • La creación de manejadores de eventos de ratón
  • Configuración de las funciones de la pintura

 

Archivo HTML


 

Todo lo que necesitas es crear un archivo HTML muy sencillo…

 

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <script type="text/javascript" src="script/brush.js"></script>
        <script type="text/javascript" src="script/main.js"></script>
    </head>
    <body>
    
        <div>
            <div id='picker' class='picker'></div>
            <canvas id='canvas'></canvas>
        </div>
    </body>
</html>

 

 

Aquí está

<div id='picker' class='picker'>

 

Este es un elemento para el futuro, un selector de color.

Este ejemplo de elemento Canvas sólo tiene un atributo id para encontrar este elemento en la página. Otro atributo como el ancho y la altura se establecen en la secuencia de comandos.


Comandos


 

Primero debemos de iniciar Canvas y establecer las funciones del ratón:

 

function init()
{
    canvasWidth         = window.innerWidth;
    canvasHeight         = window.innerHeight;
    
    canvas            = document.getElementById("canvas");
    
    canvas.width        = canvasWidth;
    canvas.height       = canvasHeight;

    canvas.style.cursor = 'crosshair';

    context             = canvas.getContext("2d");

    brush               = new Brush(context);
    
    window.addEventListener('mousemove', onWindowMouseMove, false);
        
    canvas.addEventListener('mousedown', onCanvasMouseDown, false);
    canvas.addEventListener('touchstart', onCanvasTouchStart, false);
    
    initColorPicker();
}

 

La anchura del lienzo y la altura es igual a la anchura de la ventana y la altura, ya que se va a utilizar toda la pantalla. El contexto dominará el puntero en el Canvas, pasando a las funciones de la pintura. En realidad, toda la pintura es ejecutada en el contexto del Canvas, pero no sobre el Canvas en sí.

A continuación, la configuración de las funciones del detector para manejar eventos de ratón y el tacto (para pantallas táctiles).

initColorPicker - selector de configuraciones de color para nuestra aplicación:

 

function initColorPicker()
{    
    picker = document.getElementById('picker');
    
    var colors = ["#000000", "#FFAEC9", "#CC666A", "#B97A57", "#ED1C24", "#6B442E", "#993333", "#EFE4B0", "#FFF880"];
    
    for(var i = 0; i < colors.length; ++i)
    {
        color = document.createElement("div");
        
        color.className = "color";
        color.style.backgroundColor = colors[i];
        color.addEventListener('mousedown', onStrokeColor, false);
        
        picker.appendChild(color);
    }
}

 

 

El selector de color se crea de forma dinámica. Si deseas añadir más colores en un selector de color, sólo tienes que añadirlos a la gama. Si se hace click en el elemento de selector de color, será seleccionado como color del pincel. Aquí hay un controlador de click:

 

function onStrokeColor(event)
{
    var colorParts = this.style.backgroundColor.toString().match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    
    if(colorParts != null && colorParts.length == 4)
    {
        strokeColor = "rgba(" + colorParts[1] + "," + colorParts[2] + "," + colorParts[3] + ",0.1)";
    }
}

 

El primer color seleccionado se analiza y el color junto al elegido, se guarda en la variable strokeColor para un futuro uso

Vamos a ver en las funciones de manejo del ratón:

 

function onCanvasTouchStart(event)
{
    if(event.touches.length == 1)
    {
        event.preventDefault();
        
        brush.beginStroke(strokeColor, event.touches[0].pageX, event.touches[0].pageY);
        
        window.addEventListener('touchmove', onCanvasTouchMove, false);
        window.addEventListener('touchend', onCanvasTouchEnd, false);
    }
}

function onCanvasMouseDown(event)
{
    brush.beginStroke(strokeColor, event.clientX, event.clientY);

    window.addEventListener('mousemove', onCanvasMouseMove, false);
    window.addEventListener('mouseup', onCanvasMouseUp, false);
}

function onCanvasMouseMove(event)
{    
    brush.doStroke(event.clientX, event.clientY);
}

function onCanvasMouseUp()
{
    brush.endStroke();
    
    window.removeEventListener('mousemove', onCanvasMouseMove, false);
    window.removeEventListener('mouseup', onCanvasMouseUp, false);
}

 

Como se puede ver, con la función ratón abajo y el evento táctil en beginStrok, llamamos al evento y creamos uno nuevo. Necesitamos una nueva llamada para conseguir saber cuándo hemos terminado de pintar con nuestro pincel.

Brush es una función que implementa algunas instrucciones y la funcionalidad de la pintura del pincel. ¿Por qué se implementa el pincel como un elemento aparte? La respuesta es simple: si vas a agregar más pinceles, todo lo que necesita es sólo crear más clases de pincel. Vamos a verlo con la función Brush:


function Brush(context)

{

this.

init

(

context

);

}

Brush

.prototype

=

{

mouseX

:

null,

mouseY

:

null,

context

:

null,

strokeColor

:

null,

init

:

function(

context

)

{

this.

context

=

context

;

},

beginStroke

:

function(

color

,

mouseX

,

mouseY

)

{

this.

mouseX

=

mouseX

;

this.

mouseY

=

mouseY

;

this.

strokeColor

=

color

;

},

doStroke

:

function(

mouseX

,

mouseY

)

{

this.

context

.

lineWidth

=

1;

this.

context

.

strokeStyle

=

this.

strokeColor

;

this.

context

.

beginPath

();

this.

context

.

moveTo

(this.

mouseX

,

this.

mouseY

);

this.

context

.

lineTo

(

mouseX

,

mouseY

);

this.

context

.

stroke

();

},

endStroke

:

function(

mouseX

,

mouseY

)

{

}

}

 

Lo más interesante aquí es la función doStroke. Esta función en el contexto del Canvas facilita a cada usuario el tiempo que mantiene presionado el botón del ratón y mueve el cursor alrededor de lienzo.

 

lineWidth - puedes jugar con este parámetro para ver cómo afecta a la línea de resultado

strokeStyle - color de la línea

BeginPath - inicio del camino

moveTo - mueve el punto de inicio a la posición especificada

lineTo - pintar la línea desde el punto de inicio (moveTo) al punto especificado

stroke – línea final de la pintura en el contexto


Eso es todo. Como se puede ver en la aplicación no es complejo. Os animo a probar Canvas.

 

Artículo original disponible en este enlace.

Einzelheiten zur Compiler-Optimierung finden Sie in unserem Optimierungshinweis.