Inicio rápido: dibujar en un Canvas (HTML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

El elemento canvas produce un Canvas de mapa de bits rectangular en la página, donde puedes usar JavaScript para dibujar imágenes gráficas sobre la marcha. El Canvas es estupendo para crear juegos o para cualquier situación en la que generes gráficos en tiempo real o tengas que cambiarlos con regularidad.

Este inicio rápido contiene las siguientes secciones:

• Requisitos previos
• El elemento canvas
• Representar contextos
• Dibujar rectángulos
• Usar rutas de acceso
• Dibujar arcos
• Dibujar curvas
• La curva cuadrática
• La curva Bézier o cúbica
• Pasos siguientes

Requisitos previos

En este tema se da por hecho que sabes crear una aplicación de la Tienda Windows básica con JavaScript que use la plantilla de la Biblioteca de Windows para JavaScript, y que tienes conocimientos básicos de HTML y JavaScript. Para obtener instrucciones sobre cómo crear tu primera aplicación de la Tienda Windows con JavaScript, consulta el tema acerca de cómo crear tu primera aplicación web. Para obtener instrucciones sobre el uso de la plantilla de WinJS, consulta el tema sobre cómo obtener y usar el kit de herramientas de WinJS.

El elemento canvas

El elemento canvas produce un Canvas de mapa de bits rectangular en la página, donde puedes usar JavaScript para representar imágenes gráficas sobre la marcha.

El elemento canvas tiene atributos de ancho y alto. Los dos atributos son opcionales y se pueden configurar mediante las propiedades de Document Object Model (DOM). Si no estableces los atributos de ancho y alto, el Canvas aparece con su tamaño predeterminado de 300 píxeles de ancho y 150 píxeles de alto.

<canvas id="canvas" width="150" height="150"></canvas>

El atributo id no forma parte del elemento canvas, pero se usa para identificarlo en el script.

Puedes establecer el tamaño del Canvas mediante hojas de estilo CSS. De manera predeterminada, la aplicación representa el elemento canvas sin contenido ni bordes: es completamente transparente. Sin embargo, puedes aplicar estilos como a cualquier imagen normal. Para ello, debes especificar un margen, un fondo, etc. Si le aplicas estilos, esto no afectará al dibujo real sobre el Canvas.

Representar contextos

Al agregar un elemento canvas a la aplicación, simplemente se crea una superficie de dibujo transparente. Para dibujar en el Canvas, debes obtener un contexto de representación del Canvas y usarlo para dibujar. Hay diferentes tipos de contextos de representación que permiten dibujar de maneras distintas. Por ejemplo, hay un contexto en 2D para gráficos en 2D y un contexto en 3D para gráficos en 3D. En los ejemplos de este tema se usa un contexto de representación en 2D.

Para obtener un contexto de representación, llama al método getContext del elemento canvas, como se muestra en el siguiente ejemplo:

var canvas = document.getElementById("quickstart");
var context = canvas.getContext("2d");

En este ejemplo, empezamos usando getElementById para recuperar el nodo DOM de canvas y después usamos el método getContext para acceder al contexto de representación. El método getContent toma un parámetro, el tipo de contexto. En nuestro ejemplo, es ‘2d’.

Después de obtener un contexto de representación, puedes usarlo para dibujar. En las secciones siguientes se describe cómo dibujar distintos tipos de formas.

Dibujar rectángulos

Puedes usar dos funciones para dibujar rectángulos en un Canvas:

• fillRect

  fillRect (x, y, width, height)

  El método dibuja un rectángulo relleno.

  Los parámetros "x" e "y" son coordenadas que colocan el rectángulo en el Canvas y son relativas a la esquina superior izquierda del Canvas. El ancho y el alto se miden en píxeles.

• strokeRect

  strokeRect(x, y, width, height)

  Los parámetros strokeRect son los mismos que para fillRect. La diferencia es que strokeRect dibuja solo el contorno de un rectángulo.

Este método aplica color a una forma especificada:

• fillStyle

  fillStyle = color

  El método fillStyle usa un solo parámetro para rellenar una forma con un color. Puedes establecer el color mediante RGB, un color predefinido, como "rojo", "azul", etc., un color hexadecimal o incluso un gradiente. Para obtener ejemplos de fillStyle, consulta el ejemplo de Dibujar rectángulos que aparece más adelante.

Este método borra el área especificada y la convierte en totalmente transparente:

• clearRect

  clearRect(x, y, width, height)

  Al igual que con los métodos fillRect y strokeRect, los parámetros "x" e "y" de clearRect colocan el área rectangular y establecen el ancho y el alto del rectángulo.

Ejemplo

Empecemos con un ejemplo que creará un Canvas y dibujará dos cuadrados rellenos: uno dorado y otro púrpura transparente. Se usará CSS para crear un borde negro alrededor del Canvas:

El ejemplo comienza declarando un elemento canvas en el <body> del código HTML. Al elemento canvas se le asigna un atributo id denominado "canvas", y los atributos height y width del elemento se establecen en 100 píxeles:

<body>
   <canvas id="canvas" width="100" height="100" />
</body>

Mediante CSS, se crea el elemento canvas con un pixel de ancho y un borde de color negro sólido. La hoja CSS debe estar incluida en un archivo externo para que la carga de archivos resulte lo más eficaz posible:

/* style the canvas element with a black border. */
canvas { border: 1px solid black; }

El código JavaScript, que dibuja los dos rectángulos rellenos en el Canvas, también está incluido en el archivo externo. Comienza después de cargarse el documento HTML, empleando el controlador de eventos para window.onload para llamar a la función draw.

window.onload = draw;

El método draw obtiene el elemento canvas mediante el método getElementById. Después, llama al método getContext para obtener el contexto de dibujo. Debes pasar la cadena "2d" al método getContext.

Cada Canvas tiene un contexto de dibujo. El contexto de dibujo es el lugar donde se definen todos los métodos y las propiedades de dibujo.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D drawing context.
var context = canvas.getContext("2d");

Para empezar a dibujar el primer cuadrado, se establece fillStyle en un color. Hay varias formas de rellenar un rectángulo. En este ejemplo, estamos usando el equivalente RGB para dorado:

context.fillStyle = "rgb(255, 215, 0)";

Existen otras maneras de establecer el fillStyle.

• Si están disponibles, puedes usar los colores predefinidos, como "amarillo", "naranja", "morado", etc.:

  context.fillStyle = "gold";

• O bien, usar la representación hexadecimal de la forma del color #RRGGBB:

  context.fillStyle = "#FFD700";

  Este número hexadecimal es un color dorado profundo.

• Aunque no se considera un color, puedes usar un gradiente para fillStyle:

  var myGradient=context.createLinearGradient(20, 20, 100, 0);
  
  myGradient.addColorStop(0,"goldenrod");
  myGradient.addColorStop(1,"white");
  
  context.fillStyle = myGradient;
  

  En este ejemplo se crea un gradiente lineal, se establecen las paradas de color y se provoca que el rectángulo se dibuje con difuminado de color desde el ocre hasta el blanco.

  

• El fillStyle predeterminado es negro sólido.

A continuación, podemos dibujar realmente el rectángulo con el método fillRect . Los valores de fillRect comienzan a dibujar un rectángulo relleno, que establece las coordenadas "x" e "y" para la esquina superior izquierda del rectángulo en 15, 15. Las coordenadas "x" e "y" son relativas a la esquina superior izquierda del Canvas. El ancho y el alto del rectángulo se establecen en 55 y 50 píxeles respectivamente:

context.fillRect (15, 15, 55, 50);

Para el segundo rectángulo, el fillStyle se establece en el equivalente RGB para púrpura. El cuarto valor, la “A” o Alpha, en RGBA, se establece en 0,5 y determina la opacidad del color. Los valores Alpha válidos abarcan desde 0.0 (totalmente transparente) hasta 1.0 (totalmente opaco):

context.fillStyle = "rgba(0, 0, 200, 0.5)"

Los valores de fillRect comienzan a dibujar en las coordenadas "x" e "y" para la esquina superior izquierda del rectángulo en 40, 40. El ancho y el alto del rectángulo se establecen en 45 y 40 píxeles respectivamente:

context.fillRect (40, 40, 45, 40);

Estos son los ejemplos de código completos:

Este es el código JavaScript. En nuestro ejemplo, este archivo se llamaría myJavascript.js:

window.onload = draw;   

// This function is called on page load.
function draw() {

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2d drawing context.
    var context = canvas.getContext("2d");

    // Set the color to the RGB equivalent of gold.
    context.fillStyle = "rgb(255, 215, 0)";

    // Draw the rectangle.
    context.fillRect (15, 15, 55, 50);

    // Set the color to the RGB equivalent of purple and
    // set the opacity of the rectangle to 50 percent.
    
    context.fillStyle = "rgba(0, 0, 200, 0.5)"

    // Draw the rectangle.
    context.fillRect (40, 40, 45, 40);
}

Este es el archivo HTML:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js" defer="defer"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="100" height="100" />
    </body>
</html>

Usar rutas de acceso

El método beginPath inicia una nueva ruta de acceso y usa otros métodos, como moveTo, lineTo o arc para dibujar una combinación de líneas, curvas y otras formas.

Después de crear una ruta de acceso, puedes usar los métodos fillStyle o strokeStyle para representar la ruta de acceso al Canvas.

Ejemplo

En este ejemplo se dibujará un triángulo marrón:

Usaremos los mismos archivos HTML y CSS que usamos para el primer ejemplo. En el archivo myJavascript de JavaScript, usaremos la misma función y volveremos a llamarla después de que se cargue el HTML.

Después de obtener el elemento canvas y especificar un tipo de Canvas en 2D, empezamos a dibujar el triángulo marrón llamando al método beginPath.

context.beginPath();

De manera interna, las rutas de acceso se almacenan como una lista de rutas de acceso secundarias (líneas, arcos, etc.) que en conjunto constituyen una forma. Cada vez que se llama al método beginPath, se restablece la lista y podemos empezar a dibujar nuevas formas.

Antes de dibujar cualquier línea, deberás llamar a la función moveTo. La función moveTo no dibuja nada: es como colocar un lápiz o una pluma en el punto en el que quieres comenzar a dibujar el triángulo.

context.moveTo(28, 20);

El moveTo toma dos argumentos, las coordenadas "x" e "y". Aquí hemos establecido la coordenada "x" en 28 y la coordenada "y" en 20. Las coordenadas son relativas al borde del Canvas sobre el que estás dibujando.

A continuación, dibujaremos las líneas del triángulo usando la función lineTo. Al igual que con la función moveTo, la función lineTo tiene dos argumentos, las coordenadas "x" e "y", que son los extremos de la línea que estamos dibujando:

context.lineTo(78, 50); 
context.lineTo(28, 78); 
context.lineTo(28, 20); 

En nuestro ejemplo, establecemos la propiedad fillStyle en un valor hexadecimal para el color marrón. Como comentamos en la sección Dibujar rectángulos, la propiedad fillStyle puede ser un color RGB, un color hexadecimal, un color predefinido o un gradiente.

context.fillStyle = "#996633";

Vamos a usar fillStyle para pintar el triángulo de marrón sólido. Podríamos usar la función strokeStyle, que pintaría solo el contorno de la forma.

Ahora dibujaremos la forma del triángulo.

context.fill();

Este es el código JavaScript completo:

    // Get the canvas element.
    var canvas = document.getElementById("canvas");

    // Specify a 2-D canvas type.
    var context = canvas.getContext("2d");
           
    // Add the brown triangle.
    context.beginPath();
    context.moveTo(28, 20);
    context.lineTo(78, 50); 
    context.lineTo(28, 78); 
    context.lineTo(28, 20); 
          
    // Set the color to the hexadecimal equivalent of brown.
    // Omit this step and the triangle will render 
    // the default color of black.
    context.fillStyle = "#996633";

    // Draw the triangle.
    context.fill();  

Dibujar arcos

Para dibujar arcos o círculos, usaremos el método arc:

context.arc(x, y, radius, startingAngle, endingAngle, antiClockwise);

Este método toma cinco parámetros:

• "x" e "y" son las coordenadas del centro del círculo.
• El radio es la distancia desde el centro del círculo hasta un punto en el círculo.
• Los parámetros startingAngle y endingAngle definen los puntos de inicio y final del arco en radianes, que se miden a partir del eje x.
• El parámetro anticlockwise es un valor booleano que, cuando es true, dibuja el arco en sentido contrario a las agujas del reloj; de lo contrario, lo dibuja en el sentido de las agujas del reloj.

Ejemplo

En este ejemplo se dibujará un círculo azul.

Después de obtener el elemento canvas y especificar un tipo de Canvas en 2D, empezamos a dibujar el círculo llamando al método beginPath.

context.beginPath();

En los ejemplos anteriores de rectángulo y triángulo usamos la función fillStyle para rellenar y aplicar color a las formas. En este ejemplo, estableceremos un color RGB en azul y dibujaremos solo el contorno del círculo mediante strokeStyle.

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

La función arc se define del siguiente modo:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

Donde:

• Las coordenadas "x" e "y" colocan el centro del círculo en 50, 50 respectivamente.
• El radio del círculo se establece en 32.
• El inicio y el final del círculo se establecen en 0 y "2 * Math.PI" radianes, que es un círculo completo.
• El parámetro anticlockwise se establece en true, lo cual no es muy importante cuando se dibuja un círculo completo, pero sí que es importante cuando se dibuja una parte de un arco.

Por último, se usa la función stroke para dibujar el círculo que acabamos de definir:

// draw the circle.
context.stroke();

Este es el aspecto que tendría nuestro círculo si solo dibujáramos ½ del arco, o desde cero hasta Math.PI:

// Define the circle using an arc.
context.arc(50, 50, 32, 0, Math.PI, true);

Este es el código JavaScript. De nuevo, este código se incluiría en una función draw a la que se llamaría después de cargarse la página HTML. Consulta la sección Dibujar rectángulos para obtener un ejemplo completo de los archivos HTML o JavaScript.

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
          
// Start the path.
context.beginPath();

// Define the stroke color in RGB for blue.
context.strokeStyle = "rgb(0, 162, 232)";

// Define the circle using an arc.
context.arc(50, 50, 32, 0, 2 * Math.PI, true);

// draw the circle.
context.stroke();

Dibujar curvas

Las curvas se usan para dibujar formas complejas. Hay dos tipos de curvas: la curva Bézier o cúbica y la quadratic. Los dos tipos de curva tienen un inicio y un final en el Canvas. Sin embargo, difieren en el modo de dibujar la curva, que se basa en un punto de control o en varios. La curva quadratic tiene un punto de control, mientras que una curva Bézier usa dos puntos de control. Las curvas siempre se incluyen en una ruta de acceso.

La curva cuadrática

Este es el método quadraticCurveTo:

quadraticCurveTo(cp1x, cp1y, X, Y)

Los cuatro parámetros son dos pares de coordenadas "x" e "y". El primer par, cp1x y cp1y es la ubicación del punto de control en la curva, y el segundo es la ubicación del extremo de la curva.

Al igual que con todas las formas, la curva se inicia con un método moveTo(x, y) que proporciona las coordenadas "x" e "y" para el inicio de la curva.

Se dibujan dos líneas tangenciales imaginarias desde los extremos al punto de control. La curva se dibuja con una línea a medida que se mueve por la tangencial:

Ejemplo

En este ejemplo se usa una serie de métodos quadraticCurveTo para dibujar una figura abstracta con una base ondulada. Observa que cuanto más cerca están los puntos de control del extremo, la curva se hace más pequeña en la base ondulada.

Empezamos obteniendo el elemento canvas y especificamos un tipo de Canvas en 2D. Después, llamamos al método beginPath para crear la ruta de acceso.

context.beginPath();

Establecemos nuestro punto de inicio para la primera curva y las coordenadas "x" e "y" en 75 y 25 respectivamente.

context.moveTo(75, 25);

Cada una de las curvas quadratic se establece del siguiente modo:

context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

Donde cada parámetro es:

• cp1x
  La coordenada x del punto de control.

• cp1y
  La coordenada y del punto de control.

• x
  La coordenada x del extremo de la curva.

• y
  La coordenada y del extremo de la curva.

Observa que es importante el orden con el que se dibujan las curvas. Puedes quitar una curva o dos, o cambiar el orden en que se dibujan para ver cómo se construyen.

El color se establece en verde, configurando fillStyle en valores RGB para verde.

context.fillStyle = "rgb(100, 200, 50)";

Por último, se aplica un color a la forma con la función fill:

context.fill();

Observa que para este ejemplo y el siguiente, el tamaño del Canvas aumentó a 150 por 150 píxeles:

<canvas id="canvas" width="150" height="150" />

Este es el ejemplo completo:

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");
         
// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75,25);

// Set each of the curves.        
context.quadraticCurveTo(10, 80, 40, 130);
context.quadraticCurveTo(30, 90, 50, 130);
context.quadraticCurveTo(50, 100, 70, 130);
context.quadraticCurveTo(80, 110, 100, 130);
context.quadraticCurveTo(120, 120, 140, 130);

// Set the color of the image to green.
context.fillStyle = "rgb(100, 200, 50)";

// Draw the image.
context.fill();

La curva Bézier o cúbica

Este es el método bezierCurveTo:

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

Los seis parámetros son tres pares de coordenadas "x" e "y". El primer par, cp1x y cp1y, es la ubicación del primer punto de control en la curva. El segundo, cp2x y cp2y, es la ubicación del segundo punto de control. El tercero es la ubicación del extremo de la curva.

La curva comienza con las coordenadas "x" e "y" en el método moveTo(x, y).

Se dibujan dos líneas tangenciales imaginarias desde los puntos de control a los extremos. La curva se dibuja con una línea a medida que se mueve por las líneas tangenciales, como se muestra en la ilustración con las líneas púrpura:

Ejemplo

En este ejemplo se usa una serie de métodos bezierCurveTo para dibujar una figura abstracta con una base ondulada.

Después de obtener el elemento canvas y especificar un tipo de Canvas en 2D, creamos la ruta de acceso llamando al método beginPath.

context.beginPath();

Establecemos nuestro punto de inicio para la primera curva y las coordenadas "x" e "y" en 75 y 25 respectivamente.

context.moveTo(75, 25);

Cada una de las curvas Bézier se establece del siguiente modo:

context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

Donde cada parámetro es:

• cp1x
  La coordenada x del primer punto de control Bézier.

• cp1y
  La coordenada y del primer punto de control Bézier.

• cp2x
  La coordenada x del segundo punto de control Bézier.

• cp2y
  La coordenada y del segundo punto de control Bézier.

• x
  La coordenada x del extremo de la curva.

• y
  La coordenada y del extremo de la curva.

Observa que es importante el orden con el que se dibujan las curvas. Puedes quitar una curva o dos, o cambiar el orden en que se dibujan para ver cómo se construyen.

El color se establece en rojo, mediante la configuración de fillStyle en valores RGB para rojo.

context.fillStyle = "rgb(200, 0, 0)";

Por último, se aplica un color a la forma con la función fill:

context.fill();

Observa que para este ejemplo, el tamaño del Canvas aumentó a 150 por 150 píxeles:

<canvas id="canvas" width="150" height="150" />

Este es el ejemplo de código completo:

// Get the canvas element.
var canvas = document.getElementById("canvas");

// Specify a 2-D canvas type.
var context = canvas.getContext("2d");

// Create the path.
context.beginPath();

// Set the starting point for the curve.
context.moveTo(75, 25);
 
// Set each of the curves.
context.bezierCurveTo(10, 100, 10, 122, 20, 130);
context.bezierCurveTo(20, 100, 20, 122, 30, 130);
context.bezierCurveTo(40, 100, 40, 122, 50, 130);
context.bezierCurveTo(70, 100, 70, 122, 80, 130);
context.bezierCurveTo(110, 100, 110, 122, 120, 130);
context.bezierCurveTo(160, 100, 160, 122, 170, 130);

// Set the color of the image to red.
context.fillStyle = "rgb(200, 0, 0)";

// Draw the image.
context.fill();

Pasos siguientes

En este inicio rápido, agregamos un elemento canvas para crear una superficie de dibujo transparente. También creamos un borde alrededor de esta superficie con CSS y usamos JavaScript para dibujar imágenes gráficas sobre ella.

Obtuvimos un contexto de dibujo en 2D a partir del elemento canvas para poder establecer fillRect y fillStyle para dibujar rectángulos. Establecimos fillStyle de varias maneras para aplicar color a los gráficos, como valores RGB, valores hexadecimales, colores predefinidos y un gradiente.

Vimos cómo el método beginPath inicia una nueva ruta de acceso y usa otros métodos, como moveTo, lineTo o arc para dibujar una combinación de líneas, círculos y curvas.

Después de crear una ruta de acceso, usamos los métodos fillStyle o strokeStyle para representar la ruta de acceso al Canvas.

A continuación, aprenderás a crear animaciones de gráficos en el Canvas y a crear un gradiente.

Cómo crear animaciones de gráficos en el Canvas

Cómo crear un gradiente