HTML5: Dibujando con Canvas

En este pequeño post, firmado por vladimir-kostarev, explicaremos las diferentes opciones para poder ¡dibujar en Canvas!

 

Canvas es un elemento nuevo en HTML5 que se utiliza para crear gráficos de secuencia de comandos. Este elemento se basa en la especificación WHATWG.

Antes, el elemento de lienzo que aparecía en HTML era un quebradero de cabeza para los desarrolladores a la hora de crear gráficos dinámicos en la página web. Para dibujar algo, sin Canvas, es necesario implementar algunas ‘trucos’ con CSS o usar plugins de terceros como los applets de Flash o Java. Con Canvas todo lo que necesitas es solamente poner los elementos en su página y dibujar lo que quieras con JScript.

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

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

 

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

 

Herramientas de dibujo

·         Rectángulos

·         Arcos

·         Elipsis

·         Trazados de líneas

·         Curvas poligonales

 

Efectos

·         Rellenos y trazos

·         Sombras

·         Degradados lineales y radiales

·         Transparencia alfa

·         Composición

 

Transformaciones

·         Escala

·         Rotación

·         Traducción

·         Transformación de la matriz

 

Y mucho más...

En este artículo veremos cómo dibujar en la página con el elemento Canvas en un ejemplo sencillo. Esta será una aplicación de dibujo simple. Para crear nuestra aplicación de dibujo nos falta completar varios pasos importantes.

·         Ajustes a archivo HTML con el elemento Canvas

·         La creación de un script para dibujar en el contexto de Canvas

·         La creación de acciones con el ratón

·         Configuración de las funciones del dibujo

 

ARCHIVO HTML

Tan sólo necesitamos crear este documento HTML

<!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>

Here is

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

 

Es un elemento para su uso futuro, teniendo un selector de color. En este ejemplo de elemento Canvas, sólo tiene un atributo id para encontrarlo en la página. Otro atributo como el ancho y la altura se establece en la secuencia de comandos.

SCRIPT FILE

Primero tenemos que iniciar nuestro Canvas y el manejo de 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 para el dibujo. La variable de contexto consistirá en un puntero en el contexto del canvas, lo que se pasará a las funciones del dibujo. En realidad, todo el dibujo está en el contexto del Canvas, pero no sobre éste en sí.

A continuación la configuración de funciones de 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 quieres añadir más colores de un selector de color, sólo tienes que añadir más colores a la gama de colores. Si el elemento de selector de color se hace click, el color de este elemento será seleccionado como color de 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 de al lado elegido, se guarda en strokeColor para un uso futuro. Vamos a ver en las funciones de manejo del ratón:

 

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)";

    }

}


First selected color is parsed and next choosen color is saved in global variable strokeColor for future use. Let see on mouse handling functions:


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 se crean llamadas. Necesitamos nuevos ‘listeneers’ para conseguir saber terminar de pintar con nuestro Brush. ‘Brush’ es una ‘class’ que implementa algunas funciones y desarrollo de la pintura del pincel. ¿Por qué implementar el pincel de manera separada? La respuesta es simple: porque si vas a agregar más pinceles, todo lo que necesita es crear más clases de pincel. Vamos a ver cómo:

 

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 una función doStroke. Esta función de líneas de pintura en el contexto otorga a cada usuario el tiempo mantiene presionado el botón del ratón y mueve el cursor alrededor del Canvas.

El ancho de línea – con el ancho de la línea puedes jugar con este parámetro para ver cómo afecta a la línea de resultado strokeStyle

Color de la línea de BeginPath - inicio  para dibujar el camino moveTo

 Mueve el punto de inicio en la posición especificada lineTo - pintar la línea del punto de partida (moveTo) para la carrera de punto especificado

Pintar la línea final en el contexto. Eso es todo. Como se puede ver la pintura en la página web no es complejo. Todo es sencillo. Colocando Canvas en la página, puedes conseguir cualquier cosa con un contexto Canvas y el dibujo que necesitas con la escritura.

 

Artículo original disponible en: http://appdeveloper.intel.com/en-us/blog/2011/10/31/html5-painting-canvas

Для получения подробной информации о возможностях оптимизации компилятора обратитесь к нашему Уведомлению об оптимизации.