Lienzo HTML5, un tutorial para principiantes

La especificación HTML5 presenta muchas características nuevas, una de las más emocionantes es el elemento lienzo. El lienzo HTML 5 proporciona una forma de dibujar gráficos a través de JavaScript, que es fácil de usar pero potente. Cada elemento de lienzo tiene un contexto (contexto) (piense como una página en un tablero de dibujo) donde se puede dibujar cualquier forma. El navegador admite múltiples contextos de lienzo y proporciona capacidades de dibujo gráficas a través de diferentes API. La mayoría de los navegadores admiten contextos de lienzo 2D, incluidos Opera, Firefox, Konqueror y Safari. Además, algunas versiones de Opera también admiten lienzos 3D, y Firefox también puede admitir lienzos 3D a través de complementos.

Este artículo presenta los conceptos básicos del lienzo 2D y cómo usar funciones básicas de lienzo como líneas, formas, imágenes y texto. Para comprender este artículo, será mejor que comprenda los conceptos básicos de JavaScript.

Puede hacer clic aquí para descargar el código de ejemplo en este artículo en lotes

Conceptos básicos del lienzo:

El método para crear lienzo es simple, solo necesita agregar el elemento <Canvas> a la página HTML:

<Canvas ID = MyCanvas Width = 300 Height = 150>

Contenido de retroceso, en caso de que el navegador no admita el lienzo.

</able>

Para hacer referencia a elementos en JavaScript, es mejor establecer la ID de elemento; También debe establecer la altura y el ancho del lienzo.

Una vez que se cree el lienzo, preparemos el cepillo. Para dibujar un gráfico en un lienzo, debe usar JavaScript. Primero encuentre el elemento Canvas a través de la función GetElementByID e inicialice el contexto. Luego se pueden dibujar varios gráficos utilizando la API de contexto. El siguiente script dibuja un rectángulo en lienzo (haga clic aquí para ver el efecto):

// Obtenga una referencia al elemento.

var elem = document.getElementById ('mycanvas');

// Siempre verifique las propiedades y métodos, para asegurarse de que su código no se rompa

// En otros navegadores.

if (elem && elem.getContext) {

// Obtener el contexto 2D.

// Recuerde: solo puede inicializar un contexto por elemento.

VAR context = elem.getContext ('2d');

if (context) {

// ¡Ya terminaste! Ahora puedes dibujar tu primer rectángulo.

// Solo necesita proporcionar las coordenadas (x, y), seguidas del ancho y

// Dimensiones de altura.

context.fillrect (0, 0, 150, 100);

}

}

Puede colocar el código anterior en la parte principal del documento o en un archivo externo.

API de contexto 2D:

Después de introducir cómo crear lienzo, echemos un vistazo a la API de lienzo 2D para ver qué se puede hacer con estas funciones.

Líneas básicas:

El ejemplo anterior muestra lo fácil que es dibujar un rectángulo.

Las propiedades FillStyle y Strokestyle se pueden configurar fácilmente para el relleno y las líneas de rectángulo. El valor de color se usa igual que CSS: número hexadecimal, rgb (), rgba () y hsla. Fillrect se puede usar para dibujar un rectángulo con Fillrect. Use Strokerect para dibujar rectángulos con solo bordes y sin rellenos. Si desea borrar algunos lienzos, puede usar ClearRect. Los parámetros de los tres métodos anteriores son los mismos: x, y, ancho, altura. Los dos primeros parámetros establecen las coordenadas (x, y), y los dos últimos parámetros establecen la altura y el ancho del rectángulo. Puede usar la propiedad LineWidth para cambiar el grosor de la línea. Veamos los ejemplos usando Fillrect, Strokerect ClearRect y otros:

context.fillstyle = '#00f'; // azul

context.strokestyle = '#f00'; // rojo

context.linewidth = 4;

// Dibuja algunos rectángulos.

context.fillrect (0, 0, 150, 50);

context.strokerect (0, 60, 150, 50);

context.Learrect (30, 25, 90, 60);

context.strokerect (30, 25, 90, 60);

Este ejemplo de representación se muestra en la siguiente figura:

camino:

Las formas arbitrarias se pueden dibujar a través de la ruta del lienzo (ruta). Primero puede dibujar el contorno, luego dibujar el borde y rellenar. Crear una forma personalizada es simple, comience a dibujar con BeginPath () y luego dibuje su figura con líneas rectas, curvas y otros gráficos. Después del dibujo, llame a llenar y acariciar para agregar bordes de relleno o establecer. Llame a ClosePath () para finalizar el dibujo gráfico personalizado. Aquí hay un ejemplo de dibujar un triángulo:

// Establecer las propiedades de estilo.

context.fillstyle = '#00f';

context.strokestyle = '#f00';

context.linewidth = 4;

context.beginPath ();

// Comience desde el punto superior izquierda.

context.moveto (10, 10); // dar las coordenadas (x, y)

context.lineto (100, 10);

context.lineto (10, 100);

context.lineto (10, 10);

// ¡Hecho! Ahora llena la forma y dibuja el golpe.

// Nota: Su forma no será visible hasta que llame a cualquiera de los dos métodos.

context.fill ();

context.stroke ();

context.ClosePath ();

Las representaciones se muestran en la siguiente figura:

Otro ejemplo más complejo usa líneas rectas, curvas y arcos.

Insertar imagen:

El método DrawImage permite insertar otras imágenes (elementos IMG y Canvas) en lienzo. En Opera, puede dibujar gráficos SVG en lienzo. Este método es más complicado y puede tener 3, 5 o 9 parámetros

3 Parámetros: el método más básico para usar DrawImage. Un parámetro especifica la posición de la imagen, y los otros dos parámetros especifican la posición de la imagen en el lienzo.

5 Parámetros: Método de uso de Drawimage intermedio, incluidos los 3 parámetros mencionados anteriormente, agregue dos parámetros para indicar el ancho y la altura de la imagen de inserción (si desea cambiar el tamaño de la imagen).

9 Parámetros: la Drawimage más compleja es un método de uso mixto, que incluye los 5 parámetros anteriores, y los otros 4 parámetros establecen el ancho de posición y altura en la imagen de origen. Estos parámetros le permiten recortar dinámicamente la imagen de origen antes de mostrarla.

Aquí hay tres ejemplos de los métodos de uso anteriores:

// Tres argumentos: el elemento, coordenadas de destino (x, y).

context.DrawImage (img_elem, dx, dy);

// Cinco argumentos: el elemento, las coordenadas de destino (x, y) y el destino

// Ancho y altura (si desea cambiar el tamaño de la imagen de origen).

context.DrawImage (img_elem, dx, dy, dw, dh);

// nueve argumentos: el elemento, las coordenadas de fuente (x, y), ancho de fuente y

// Altura (para cultivo), coordenadas de destino (x, y) y ancho de destino

// y altura (cambiar de tamaño).

context.DrawImage (img_elem, sx, sy, sw, sh, dx, dy, dw, dh);

El efecto se muestra en la figura a continuación:

Operación a nivel de píxel:

La API de contexto 2D proporciona tres métodos para operaciones a nivel de píxel: createImagedata, getImagedata y Putimagedata. El objeto iMagedata guarda el valor de píxel de la imagen. Cada objeto tiene tres propiedades: ancho, altura y datos. El tipo de atributo de datos es CanvaspixelArray, que se utiliza para almacenar el ancho*altura*valores de 4 píxeles. Cada píxel tiene un valor RGB y un valor alfa de transparencia (sus valores son de 0 a 255, incluido el alfa!). El orden de los píxeles se almacena de izquierda a derecha, de arriba a abajo, por fila. Para comprender mejor su principio, veamos un ejemplo: dibuje un rectángulo rojo:

// Crear un objeto imagedata.

var imgd = context.createImagedata (50,50);

var pix = imgd.data;

// bucle sobre cada píxel y establezca un rojo transparente.

para (var i = 0; n = pix.length, i <n; i += 4) {

pix [i] = 255; // canal rojo

pix [i+3] = 127; // canal alfa

}

// Dibuja el objeto imagedata en las coordenadas dadas (x, y).

context.putimagedata (IMGD, 0,0);

Nota: No todos los navegadores implementan CreateImagedata. En los navegadores compatibles, el objeto iMagedata debe obtenerse a través del método getImagedata. Consulte el código de muestra.

IMagedata se puede usar para completar muchas funciones. Por ejemplo, se pueden implementar filtros de imagen, o se pueden implementar visualizaciones matemáticas (como fractales y otros efectos especiales). Los siguientes efectos especiales implementan un filtro de inversión de color simple:

// Obtenga el CanvaspixelArray de las coordenadas y dimensiones dadas.

var imgd = context.getImageData (x, y, ancho, altura);

var pix = imgd.data;

// bucle sobre cada píxel e invertir el color.

para (var i = 0, n = pix.length; i <n; i += 4) {

pix [i] = 255 - pix [i]; // rojo

pix [i+1] = 255 - pix [i+1]; // verde

pix [i+2] = 255 - pix [i+2]; // azul

// i+3 es alfa (el cuarto elemento)

}

// Dibuja el imagedata en las coordenadas dadas (x, y).

context.putimagedata (imgd, x, y);

La siguiente figura muestra el efecto después de usar este filtro:

Palabra:

Aunque la versión reciente de WebKit y la construcción nocturna de Firefox 3.1 acaban de comenzar a admitir la API de texto, para garantizar la integridad del artículo, decidí introducir la API de texto aquí.

Las siguientes propiedades de texto se pueden establecer en el objeto de contexto:

Font: Fuente de texto, igual que el atributo CSSFont-Family

Textalign: Texto Alineación horizontal. Valores de atributo deseables: inicio, finalización, izquierda, derecha, centro. Valor predeterminado: Inicio.

TextBaseline: alineación vertical del texto. Valores de atributo deseables: top, colgante, medio, alfabético, idegráfico, fondo. Valor predeterminado: alfabético

Hay dos formas de dibujar texto: Filltext y StrokEtext. El primer dibujo de texto con relleno relleno, el segundo dibuja texto con solo el borde de Strokestyle. Los parámetros de ambos son los mismos: el texto a dibujar y las coordenadas de posición (x, y) del texto. También hay una opción opcional: ancho máximo. Si es necesario, el navegador reduce el texto para que se ajuste al ancho especificado. El atributo de alineación del texto afecta la posición relativa del texto a las coordenadas del conjunto (x, y).

Aquí hay un ejemplo de dibujar texto de Hello World en lienzo:

context.fillstyle = '#00f';

context.font = 'cursives 30px sans-serif';

context.TextBaseline = 'top';

context.fillText ('¡Hola mundo!', 0, 0);

context.font = 'Bold 30px sans-serif';

context.StrokEtext ('¡Hola mundo!', 0, 50);

La siguiente imagen es su representación:

sombra:

Actualmente, solo Konqueror y Firefox 3.1 Nightly Build Support the Shadows API. Las propiedades de la API son:

ShadowColor: Color de sombras. Su valor es consistente con el valor de color CSS.

Shadowblur: establece el grado de desenfoque de la sombra. Cuanto mayor es este valor, más borrosa es la sombra. Su efecto es el mismo que el filtro difuso gaussiano de Photoshop.

Shadowoffsetx y ShadowOffsety: las compensaciones X e Y de la sombra, en píxeles.

Aquí hay un ejemplo de la sombra de lienzo:

context.shadowoffsetx = 5;

context.shadowoffsety = 5;

context.shadowblur = 4;

context.shadowcolor = 'rgba (255, 0, 0, 0.5)';

context.fillstyle = '#00f';

context. -FillRect (20, 20, 150, 100);

El efecto se muestra en la figura a continuación:

Gradiente de color:

Además de los colores CSS, las propiedades FillStyle y Strokestyle se pueden configurar en objetos CanvasGradient. -Los gradientes de columna se pueden usar para líneas y rellenos a través de CanvasGradient. Para crear un objeto CanvasGradient, puede usar dos métodos: CreateLinealGradient y CreateradialGradient. El primero crea un gradiente de color lineal, y el segundo crea un gradiente de color circular. Después de crear un objeto de gradiente de color, puede usar el método AddColorStorStop del objeto para agregar valores intermedios de color. El siguiente código demuestra cómo usar gradientes de color:

// necesita proporcionar las coordenadas de origen y destino (x, y)

// para el gradiente (desde donde comienza y donde termina).

VAR gradiente1 = context.CreateLineAarGradient (SX, SY, DX, DY);

// Ahora puede agregar colores en su gradiente.

// El primer argumento dice la posición del color en su gradiente. El

// El rango de valor aceptado es de 0 (inicio de gradiente) a 1 (final de gradiente).

// El segundo argumento dice el color que desea, usando el formato de color CSS.

gradiente1.addcolorStop (0, '#f00'); // rojo

gradiente1.addcolorstop (0.5, '#ff0'); // amarillo

gradiente1.addcolorstop (1, '#00f'); // azul

// Para el gradiente radial también debe proporcionar fuente

// y Radius de círculo de destino.

// Las coordenadas (x, y) definen los puntos centrales centrales (inicio y

// destino).

VAR gradiente2 = context.CreateradialGradient (SX, SY, SR, DX, DY, DR);

// Agregar colores a un gradiente radial es lo mismo que agregar colores al lineal

// Gradientes.

También preparé un ejemplo más complejo usando gradientes de color lineal, sombras y texto.

El efecto se muestra en la figura a continuación:

demostración de lienzo:

Si desea saber qué puede hacer con el lienzo, consulte el siguiente proyecto:

Widget de ópera:

Simaquarium

Cuaderno de bocetos del artista

Espirógrafo

Ingeniería y demostración en línea:

Polinomio de Newton

Canvascape - 3d Walker

Paint.web - Demo de pintura, código abierto

Vuelo de campo estrella

Mancha interactiva

Subsección:

Canvas es una de las características más esperadas de HTML 5 y actualmente es compatible con la mayoría de los navegadores web. El lienzo puede ayudar a crear juegos y mejorar las interfaces gráficas de los usuarios. Contexto 2d

La API proporciona muchas capacidades de dibujo de gráficos: ¡espero que hayas aprendido sobre el uso de lienzos a través de este artículo y que estés interesado en aprender más!