5 La especificación presenta muchas características nuevas, una de las más emocionantes es canvas . canvas HTML5 proporciona una forma de dibujar gráficos a través de JavaScript, que es fácil de usar pero potente. Cada elemento canvas tiene un contexto (contexto) (piense como una página en el tablero de dibujo) donde se puede dibujar cualquier forma. El navegador admite múltiples contextos de lienzo y proporciona funciones de dibujo gráficas a través de diferentes. Proporciona función de dibujo gráfico. 5 La especificación presenta muchas características nuevas, una de las más emocionantes son los elementos. HTML5 proporciona un método para dibujar gráficos a través de JavaScript, que es fácil de usar pero potente. Cada elemento 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 funciones de dibujo gráficas a través de diferentes.
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:
Artículo de contexto
Este artículo presenta un lienzo 2D
Conceptos básicos y cómo usar funciones de lienzo básicas 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
El método para crear lienzo es muy simple, solo necesita agregar el elemento <canvas> a la página HTML:
<canvas id=mycanvas width=300 height=150>fallback content, in case the browser does not support canvas.</canvas>Para poder hacer referencia a elementos en JavaScript, es mejor establecer la ID para el elemento; También necesita establecer la altura y el ancho para el lienzo.
Una vez que se cree el lienzo, preparemos el cepillo. Para dibujar un gráfico en un lienzo, debe usar JavaScript. Primero encontrar lienzo a través de getelementbyid
elemento, luego inicializa el contexto. Se pueden dibujar varios gráficos más tarde utilizando la API de contexto. El siguiente script dibuja un rectángulo en lienzo (haga clic aquí para ver el efecto):
// get a reference to the element.var elem = document.getelementbyid('mycanvas');// always check for properties 和methods, to make sure your code doesn't break // in other browsers.if (elem && elem.getcontext) { // get the 2d context. // remember: you can only initialize one context per element. var context = elem.getcontext('2d'); if (context) { // you are done! now you can draw your first rectangle. // you only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillrect(0, 0, 150, 100); }} Puede colocar el código anterior en head del documento o en un archivo externo.
Después de introducir cómo crear lienzo, echemos un vistazo a la API de lienzo 2D y veamos qué se puede hacer con estas funciones.
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. Método de uso del valor del color y número hexadecimal, (), () y () (si el navegador lo admite, como la ópera
10 y Firefox 3). () (Si el navegador lo admite, como Opera10 y Firefox 3). () y () (si el navegador lo admite, como Opera10 y Firefox 3). (), () y () (si el navegador lo admite, como Opera10 y Firefox 3). Números hexadecimales, (), () y () (si es compatible con el navegador, como Opera10 y Firefox 3).
fillrect se puede usar para dibujar un rectángulo de relleno. 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 el atributo LineWidth para cambiar el grosor de la línea. Veamos si se usa fillrect ,
strokerect clearrect y otros ejemplos:
context.fillstyle = '#00f'; // bluecontext.strokestyle = '#f00'; // redcontext.linewidth = 4;// draw some rectangles.context.fillrect (0, 0, 150, 50);context.strokerect(0, 60, 150, 50);context.clearrect (30, 25, 90, 60);context.strokerect(30, 25, 90, 60);Este ejemplo de representación se muestra en la Figura 1.
Figura 1: Fillrect, Strokerect y
Diagrama de efecto ClearRect
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 fill y stroke 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:
// set the style properties.context.fillstyle = '#00f';context.strokestyle = '#f00';context.linewidth = 4;context.beginpath();// start from the top-left point.context.moveto(10, 10); // give the (x,y) coordinatescontext.lineto(100, 10);context.lineto(10, 100);context.lineto(10, 10);// done! now fill the shape, 和draw the stroke.// note: your shape will not be visible until you call any of the two methods.context.fill();context.stroke();context.closepath();Las representaciones se muestran en la Figura 2.
Figura 2: Triángulo
Otro ejemplo más responsable usa líneas rectas, curvas y arcos.
El método drawimage permite insertar otras imágenes en lienzo
(Elementos img y canvas ). En el operador, puede dibujar gráficos SVG en lienzo. Este método es bastante complejo y puede tener 3, 5 o 9 parámetros:
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.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).drawimage más complejo, incluidos 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:
// three arguments: the element, destination (x,y) coordinates.context.drawimage( img_elem , dx , dy );// five arguments: the element, destination (x,y) coordinates, and destination // width and height (if you want to resize the source image).context.drawimage( img_elem , dx , dy , dw , dh );// nine arguments: the element, source (x,y) coordinates, source width and // height (for cropping), destination (x,y) coordinates, and destination width // and height (resize).context.drawimage( img_elem , sx , sy , sw , sh , dx , dy , dw , dh );El efecto se muestra en la Figura 3.
Figura 3: Representación de drawimage .
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 width * height *4 píxeles. Cada píxel tiene un valor RGB y un valor alfa de transparencia (su valor es 0 para
255, incluyendo 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: dibujar un rectángulo rojo
// create an imagedata object.var imgd = context.createimagedata(50,50);var pix = imgd.data;// loop over each pixel 和set a transparent red.for (var i = 0; n = pix.length, i < n; i += 4) { pix[i ] = 255; // red channel pix[i+3] = 127; // alpha channel}// draw the imagedata object at the given (x,y) coordinates.context.putimagedata(imgd, 0,0); Nota: No todos los navegadores implementan createimagedata . En los navegadores compatibles, imagedata debe obtenerse a través getimagedata . Consulte el código de muestra.
Muchas funciones se pueden lograr a través de imagedata . 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:
// get the canvaspixelarray from the given coordinates and dimensions.var imgd = context.getimagedata( x , y , width , height );var pix = imgd.data;// loop over each pixel and invert the color.for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element)}// draw the imagedata at the given (x,y) coordinates.context.putimagedata(imgd, x , y );La Figura 4 muestra la ópera después de usar este filtro
Imagen (la figura 3 es la imagen original).
Figura 4: Filtro de inversión de color
Aunque la versión reciente de WebKit y la construcción nocturna de Firefox 3.1 solo han comenzado a admitir 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 context :
font : texto de texto, lo mismo Atributo de atributo font-family
textalign : Texto Alineación horizontal. Valores de atributo deseables: start , end , left , right , center . Valor predeterminado:
start .
textbaseline : alineación vertical del texto. Valores de atributo deseables: top , hanging , middle , alphabetic , ideographic , bottom . Valor predeterminado: alphabetic .
Hay dos formas de dibujar texto: filltext y stroketext . El primer dibujo de texto con relleno relleno , el segundo dibuja texto con solo borde de estilo de trazo . 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 de texto afecta el texto y la configuración
(x, y) La posición relativa de las coordenadas.
Aquí hay un ejemplo de dibujar texto de Hello World en lienzo
context.fillstyle = '#00f';context.font = 'italic 30px sans-serif';context.textbaseline = 'top';context.filltext ('hello world!', 0, 0);context.font = 'bold 30px sans-serif';context.stroketext('hello world!', 0, 50);La Figura 5 es su representación.
Figura 5: efecto de texto
Actualmente, solo Konqueror y Firefox 3.1 Nightly Build Support 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 en 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 6.
Figura 6: efecto de sombra de lona - rectángulo azul, sombra roja
Además del color CSS, las propiedades fillstyle y strokestyle se pueden configurar en objetos canvasgradient . - canvasgradient puede usar gradientes de color para líneas y rellenos.
Para crear un objeto canvasgradient , puede usar dos métodos: createlineargradient 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 addcolorstop del objeto para agregar valores intermedios de color.
El siguiente código demuestra cómo usar gradientes de color:
// you need to provide the source 和destination (x,y) coordinates // for the gradient (from where it starts 和where it ends).var gradient1 = context.createlineargradient( sx , sy , dx , dy );// now you can add colors in your gradient.// the first argument tells the position for the color in your gradient. the // accepted value range is from 0 (gradient start) to 1 (gradient end).// the second argument tells the color you want, using the css color format.gradient1.addcolorstop(0, '#f00'); // redgradient1.addcolorstop(0.5, '#ff0'); // yellowgradient1.addcolorstop(1, '#00f'); // blue// for the radial gradient you also need to provide source// 和destination circle radius.// the (x,y) coordinates define the circle center points (start 和// destination).var gradient2 = context.createradialgradient( sx , sy , sr , dx , dy , dr );// adding colors to a radial gradient is the same as adding colors to linear // gradients.También preparé un ejemplo más complejo usando gradientes de color lineal, sombras y texto. El efecto se muestra en la Figura 7.
Figura 7: Ejemplo del uso de gradiente de color lineal
Si desea saber qué puede hacer con el lienzo, consulte el siguiente proyecto:
bloc de dibujo
demostración, de código abierto
vuelo
Canvas es una de las características más esperadas de HTML5 y ha sido 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
API ofrece muchas capacidades de dibujo gráficos: ¡espero que hayas aprendido sobre el uso de lienzos a través de este artículo y esté interesado en aprender más!