<canvas></canvas> es una nueva etiqueta en HTML5, utilizada para dibujar gráficos. De hecho, esta etiqueta es la misma que otras etiquetas. Su característica especial es que esta etiqueta puede obtener un objeto CanvasRenderingContext2D, que podemos usar scripts JavaScript. Controlar este objeto para dibujar.
<canvas></canvas> es solo un contenedor para dibujar gráficos. Además de atributos como id, clase y estilo, también tiene atributos de alto y ancho. Hay tres pasos principales para dibujar en el elemento <canvas>> :
<canvas> , que es un objeto Canvas; El siguiente es un ejemplo de dibujo <canvas> simple:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>demostración de dibujo en lienzo</title> <style type=text/css> #canvas{ border: 1px solid #ADACB0; visualización: bloque; margen: 20px auto; </style></head><body> <canvas id=canvas width=300 height=300> Su navegador aún no admite lienzo </canvas></body><script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); y punto final context.moveTo(10,10); context.lineTo(200,200); //Establece el estilo context.lineWidth = 2; #F5270B; //Dibujar contexto.stroke();</script></html>Si no se especifica mediante moveTo(), el punto inicial de lineTo() se basa en el punto anterior. Por lo tanto, si necesita volver a seleccionar el punto de partida, debe pasar el método moveTo(). Si necesita establecer estilos para diferentes segmentos de línea, debe volver a abrir una ruta a través de context.beginPath(). Aquí hay un ejemplo:
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Establece el punto inicial y final del objeto context.beginPath(); 100,100); contexto .lineTo(700,100); contexto.lineTo(700,400); contexto.lineWidth = 2; #F5270B; //Dibujar context.stroke(); context.beginPath(); context.moveTo(100,200); //El efecto de reemplazar moveTo con lineTo aquí es el mismo context.lineTo(600,200); ) ; //Si el color de StrokeStyle tiene un nuevo valor, sobrescribirá el valor establecido anteriormente. //Si lineWidth no tiene un valor nuevo, se mostrará de acuerdo con el valor establecido anteriormente. context.strokeStyle = #0D25F6; contexto.stroke();</script>
Dibujar rectángulos rect(), fillRect() y StrokeRect()
<tipo de script=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Utiliza el método rect context.rect(10,10,190,190); . fillStyle = #3EE4CB; contexto.strokeStyle = #F5270B contexto.fill(); //Usar el método fillRect context.fillStyle = #1424DE; context.fillRect(210,10,190,190); //Usar el método StrokeRect context.strokeStyle = #F5270B; context.strokeRect(410,10,190,190); al mismo tiempo Método context.fillStyle = #1424DE context.strokeStyle =; #F5270B; contexto.strokeRect(610,10,190,190); contexto.fillRect(610,10,190,190);</script>
Es necesario explicar dos puntos aquí: el primer punto es el orden antes y después de que se dibujen el trazo () y el relleno (). Si el relleno () se dibuja más tarde, cuando el borde del trazo sea más grande, el borde dibujado por el trazo (). obviamente se cubrirá la mitad; segundo punto: al configurar el atributo fillStyle o StrokeStyle, puede configurarlo mediante el método de configuración de rgba (255,0,0,0.2).
Hay otro relacionado con el dibujo rectangular: borrar el área rectangular: context.clearRect(x,y,width,height).
Los parámetros recibidos son: la posición inicial del rectángulo claro y el ancho y largo del rectángulo.
En el código anterior, agregue al final del dibujo el gráfico:
contexto.clearRect(100,60,600,100);
Se pueden obtener los siguientes efectos:
Dibuja una estrella de cinco puntas.Al analizar la estrella de cinco puntas, podemos determinar las reglas de las coordenadas de cada vértice. Una cosa a tener en cuenta aquí es: en el lienzo, la dirección del eje Y es hacia abajo.
El código correspondiente es el siguiente:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath() //Establece las coordenadas de un vértice y formula una ruta basada en el vértice para (var i = 0; i < 5; i++ ) { contexto.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); contexto.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200); context.closePath(); //Establece el estilo del borde y el color de relleno context.lineWidth=3; context.fillStyle = #F6F152; context.strokeStyle = #F5270B;Efecto final:
Propiedades de líneaAdemás del atributo lineWidth utilizado anteriormente, las líneas también tienen los siguientes atributos:
La propiedad lineCap establece o devuelve el estilo del límite de línea al final de la línea. Puede tomar los siguientes valores:
La propiedad lineJoin establece o devuelve el tipo de esquina creada cuando dos líneas se encuentran. Puede tomar los siguientes valores:
La propiedad miterLimit establece o devuelve la longitud máxima de inglete (el valor predeterminado es 10). La longitud de inglete se refiere a la distancia entre las esquinas interior y exterior donde se encuentran dos líneas. miterLimit solo es válido cuando el atributo lineJoin es mitre.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Probar la propiedad lineCap //Establecer la línea base para una fácil observación context.moveTo(10,10); . moveTo(200,10); contexto.lineTo(200,200); contexto.lineWidth=1; contexto.beginPath(); contexto.moveTo(10,50); contexto.lineTo(200,50); contexto.lineCap=butt; contexto.lineWidth=10; ; contexto.moveTo(10,100); contexto.lineTo(200,100); contexto.lineCap=round; contexto.stroke(); //cuadrado contexto.beginPath(); contexto.moveTo(10,150); contexto.lineTo(200,150); contexto.lineCap=cuadrado; contexto.lineWidth=10; propiedad linJoin //miter context.beginPath(); context.moveTo(300,50); contexto.lineTo(300,150); contexto.lineJoin=miter; contexto.lineWidth=10; contexto.lineTo(550,100); contexto.lineTo(400,150); contexto.lineJoin=round; contexto.lineWidth=10; contexto.beginPath(); contexto.moveTo(500,50); contexto.lineTo(650,100); contexto.lineTo(500,150); contexto.lineWidth=10; atributo miterLimit contexto.beginPath(); contexto.moveTo(700,50); contexto.lineTo(850,100); contexto.lineTo(700,150); contexto.lineJoin=miter; contexto.miterLimit=2; contexto.lineWidth=10;
Los efectos de diferentes valores para cada atributo son los siguientes:
estilo de rellenoAdemás de establecer el color, el estilo de relleno y el estilo de trazo utilizados anteriormente también pueden establecer otros estilos de relleno. Aquí tomamos el estilo de relleno como ejemplo:
gradiente linealPasos de uso
(1) var grd = context.createLinearGradient( xstart, ystart, xend, yend) crea un gradiente lineal y establece las coordenadas inicial y final;
(2) grd.addColorStop(stop, color) agrega color al degradado lineal, stop es un valor de 0~1;
(3) context.fillStyle=grd se asignará al contexto.
gradiente radialEste método es similar al método de gradiente lineal, excepto que los parámetros recibidos en el primer paso son diferentes.
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1); recibe las coordenadas y el radio del centro del círculo inicial y las coordenadas y el radio del centro del círculo final.
Relleno de mapa de bitscreatePattern( img , repetir-estilo) está lleno de imágenes y el estilo de repetición puede ser repetir, repetir-x, repetir-y o no-repetir.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Gradiente lineal var grd = context.createLinearGradient(10, 10, 100, 350); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(0.75,#2F0AF1); grd.addColorStop(1,#160303); //gradiente radial var; grd = contexto.createRadialGradient(325, 200, 0, 325, 200, 200); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0,25,#2F0AF1); ; grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(150,10,350,350); //Relleno de mapa de bits var bgimg = new Image(); (){ var patrón = contexto.createPattern(bgimg, repetir contexto.fillStyle = patrón; contexto.strokeStyle=#F20B0B; contexto.fillRect(600, 100, 200,200); contexto.strokeRect(600, 100, 200,200);El efecto es el siguiente:
Transformación gráficaTraducción: context.translate(x,y), los parámetros recibidos son la traslación del origen por x en la dirección del eje x y la traslación de y en la dirección del eje y.
Escala: context.scale (x, y), los parámetros recibidos son que el eje de coordenadas x se escala de acuerdo con la proporción x y el eje de coordenadas y se escala de acuerdo con la proporción y.
Rotación: context.rotate (ángulo), el parámetro recibido es el ángulo de rotación del eje de coordenadas.
Cabe señalar que después de cambiar los gráficos, el siguiente dibujo seguirá el estado anterior, por lo que si necesita volver al estado inicial, debe usar context.save(); y context.restore(); estado actual:
var lienzo = document.getElementById(lienzo); var contexto = lienzo.getContext(2d); //translate() contexto.save(); contexto.fillStyle = #1424DE contexto.translate(10,10); (0,0,200,200); contexto.restaurar(); //escala() contexto.guardar(); #F5270B; contexto.escala(0.5,0.5); contexto.fillRect(500,50,200,200); contexto.restore(); //rotate() contexto.save(); .PI / 4); contexto.fillRect(300,10,200,200);
El efecto es el siguiente:
Otra cosa relacionada con la transformación de gráficos es: transformación matricial: context.transform(a, b, c, d, e, f, g). El significado de los parámetros es el siguiente:
una escala horizontal (por defecto 1)
b inclinación horizontal (predeterminado 0)
c inclinación vertical (predeterminado 0)
d escala vertical (predeterminado 1)
e desplazamiento horizontal (el valor predeterminado es 0)
f desplazamiento vertical (el valor predeterminado es 0)
Los lectores pueden verificar los efectos de cada parámetro por sí mismos, y no los presentaré uno por uno aquí.
dibujar curvaHay cuatro funciones para dibujar curvas, a saber:
context.arc(x,y,r,sAngle,eAngle,en sentido contrario a las agujas del reloj se usa para crear arcos/curvas (se usa para crear círculos o círculos parciales). El significado de los parámetros recibidos:
| Parámetros | Significado |
| :--- |:---|
| x | x coordenada del centro del círculo |
|y|Coordenada Y del centro del círculo|
|r|radio del círculo|
|sAngle|Ángulo inicial en radianes (la posición de las tres en punto del círculo del arco es 0 grados)|
|eAngle|Ángulo final en radianes|
|en sentido antihorario|Opcional. Especifica si el trazado debe dibujarse en el sentido contrario a las agujas del reloj o en el sentido de las agujas del reloj. Falso = en el sentido de las agujas del reloj, verdadero = en el sentido contrario a las agujas del reloj |
A continuación se muestran algunos ejemplos de varias funciones arc():
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.strokeStyle = #F22D0D; context.lineWidth = 2; //Dibujar un círculo context.beginPath(); 40 ,0,2*Math.PI); context.stroke(); //Dibuja un semicírculo context.beginPath(); context.arc(200,100,40,0,Math.PI); context.stroke(); //Dibuja un semicírculo en sentido antihorario context.beginPath(); ; context.stroke(); //Dibujar un semicírculo cerrado context.beginPath(); contexto.arc(400,100,40,0,Math.PI); contexto.closePath(); contexto.stroke();
El efecto es el siguiente:
context.arcTo(x1,y1,x2,y2,r); Crea un arco/curva en el lienzo entre dos tangentes. El significado de los parámetros recibidos:
| parámetro | significado |
|---|---|
| x1 | Coordenada x del punto de control del arco. |
| y1 | La coordenada y del punto de control del arco. |
| x2 | Coordenada x del punto final del arco |
| y2 | La coordenada y del punto final del arco. |
| r | radio de arco |
Lo que hay que tener en cuenta aquí es que el punto inicial de la curva dibujada por la función arcTo debe establecerse mediante la función moveTo(). La función arcTo se utiliza a continuación para dibujar un rectángulo redondeado:
function createRoundRect(context, x1, y1, width, height, radio) { // Mover a la esquina superior izquierda context.moveTo(x1 + radio, y1); // Agregar un segmento de línea conectado a la esquina superior derecha context.lineTo); (x1 + ancho - radio, y1); //Agrega un arco context.arcTo(x1 + ancho, y1, x1 + ancho, y1 + radio, radio); // Agrega un segmento de línea conectado a la esquina inferior derecha context.lineTo(x1 + ancho, y1 + alto - radio // Agrega un arco context.arcTo(x1 + ancho, y1 + alto, x1); + ancho - radio, y1 + alto, radio); // Agrega un segmento de línea conectado a la esquina inferior izquierda context.lineTo(x1 + radio, y1 + alto); Agrega un arco context.arcTo(x1, y1 + altura, x1, y1 + altura - radio, radio // Agrega un segmento de línea conectado a la esquina superior izquierda context.lineTo(x1, y1 + radio); un arco Arc context.arcTo(x1, y1, x1 + radio, y1, radio context.closePath() } // Obtenga el objeto DOM correspondiente al elemento del lienzo var canvas = document.getElementById('mc'); // Obtenga el objeto CanvasRenderingContext2D dibujado en el lienzo var context = canvas.getContext('2d'); estilotrazo = #F9230B; createRoundRect(contexto, 30, 30, 400, 200, 50); contexto.trazo();El efecto es el siguiente:
context.quadraticCurveTo(cpx,cpy,x,y); dibuja una curva de Bézier cuadrática. Los significados de los parámetros son los siguientes:
| parámetro | significado |
|---|---|
| cpx | La coordenada x del punto de control de Bezier. |
| copia | La coordenada y del punto de control de Bezier. |
| incógnita | coordenada x del punto final |
| y | coordenada y del punto final |
El punto inicial de la curva es el último punto de la ruta actual. Si la ruta no existe, utilice los métodos beginPath() y moveTo() para definir el punto de partida.
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); dibuja una curva de Bézier cúbica con los siguientes parámetros:
| parámetro | significado |
|---|---|
| cp1x | Coordenada x del primer punto de control de Bézier |
| cp1y | La coordenada y del primer punto de control de Bezier. |
| cp2x | Coordenada x del segundo punto de control de Bézier |
| cp2y | La coordenada y del segundo punto de control de Bezier. |
| incógnita | coordenada x del punto final |
| y | coordenada y del punto final |
Existen principalmente tres propiedades y tres métodos relacionados con la representación de texto:
| propiedad | describir |
|---|---|
| fuente | Establece o devuelve las propiedades de fuente actuales del contenido de texto. |
| textoAlinear | Establece o devuelve la alineación actual del contenido del texto. |
| línea de base de texto | Establece o devuelve la línea base de texto actual utilizada al dibujar texto. |
| método | describir |
|---|---|
| llenarTexto() | Dibujar texto relleno en lienzo |
| trazoTexto() | Dibujar texto en lienzo (sin relleno) |
| medirTexto() | Devuelve un objeto que contiene el ancho de texto especificado. |
El uso básico de las propiedades y métodos anteriores es el siguiente:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.font=bold 30px Arial; //Establece el estilo context.strokeStyle = #1712F4; 30,100); contexto.font=negrita 50px Arial; var grd = contexto.createLinearGradient( 30 , 200, 400, 300);//Establece el estilo de relleno degradado grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); , #2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillText(¡Bienvenido a mi blog!,30,200); context.save(); .stroke(); contexto.font=negrita 20px Arial; #F80707; context.textAlign=left; context.fillText(El texto comienza en la posición especificada, 200,300); context.textAlign=center; .textAlign= right; context.fillText(el texto termina en la posición especificada, 200, 400); context.moveTo(10,500); context.lineTo(500,500); context.stroke(); context.fillStyle=#F60D0D; context.font=bold 20px Arial; 10,500); contexto.textBaseline=abajo; context.fillText (la posición especificada está debajo, 150,500); context.textBaseline=middle; context.fillText (la posición especificada está en el medio, 300,500); context.restore(); #16F643; var text = ¡Bienvenido a mi blog! ; context.strokeText(¡Bienvenido a mi blog!,10,600); context.strokeText(El ancho de la cadena anterior es: +context.measureText(text).width,10,650);
El efecto es el siguiente:
Otras propiedades y métodos. Dibujo de sombras:Agreguemos una sombra a la estrella de cinco puntas que dibujamos antes.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath() //Establece las coordenadas de un vértice y formula una ruta basada en el vértice para (var i = 0; i < 5; i++ ) { contexto.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200); contexto.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200); context.closePath(); //Establece el estilo del borde y el color de relleno context.lineWidth=3; context.fillStyle = #F6F152; context.strokeStyle = #F5270B; context.shadowColor = #F7F2B4; sombraOffsetY = 30; contexto.shadowBlur = 2; contexto.relleno();El efecto es el siguiente:
Combinación gráfica:globalAlpha: establece o devuelve el valor alfa o de transparencia actual del dibujo
Este método sirve principalmente para establecer la transparencia de los gráficos, que no se describirá en detalle aquí.
globalCompositeOperation: establece o devuelve cómo se dibuja la nueva imagen en la imagen existente. Este método tiene los siguientes valores de atributo:
| valor | describir |
|---|---|
| fuente terminada | Mostrar la imagen de origen sobre la imagen de destino (predeterminado) |
| fuente encima | Muestra la imagen de origen encima de la imagen de destino. Las partes de la imagen de origen que se encuentran fuera de la imagen de destino son invisibles |
| fuente de entrada | Muestra la imagen de origen dentro de la imagen de destino. Sólo se mostrará la parte de la imagen de origen dentro de la imagen de destino; |
| fuente de salida | Muestra la imagen de origen además de la imagen de destino. Solo se muestra la parte de la imagen de origen fuera de la imagen de destino y la imagen de destino es transparente |
| destino terminado | Mostrar la imagen de destino sobre la imagen de origen |
| destino-encima | Muestra la imagen de destino encima de la imagen de origen. Las partes de la imagen de destino que se encuentran fuera de la imagen de origen son invisibles |
| destino-en | Muestra la imagen de destino dentro de la imagen de origen. Solo se mostrará la parte de la imagen de destino dentro de la imagen de origen, y la imagen de origen es transparente |
| destino-fuera | Muestra la imagen de destino además de la imagen de origen. Solo se mostrará la parte de la imagen de destino fuera de la imagen de origen, y la imagen de origen es transparente |
| encendedor | Mostrar imagen de origen + imagen de destino |
| Copiar | Mostrar imagen fuente. Ignorar la imagen de destino |
| xor | Combine imágenes de origen y destino mediante la operación XOR |
Aquí tienes un pequeño ejemplo de cómo se puede cambiar la combinación con un clic:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Combinación gráfica</title> <style type=text/css> #canvas{ border: 1px solid #1C0EFA; : bloque; margen: 20px auto; } #botones{ ancho: 1000px; margen: 5px auto; ambos } #botones a{ tamaño de fuente: 18px; pantalla: bloque; flotante: izquierda; margen izquierdo: 20px; </style></head><body> <canvas id=canvas width=1000 height=800> Su navegador aún no es compatible lienzo </canvas> <div id=botones> <a href=#>fuente sobre</a> <a href=#>fuente encima</a> <a href=#>fuente de entrada</a> <a href=#>fuente de salida</a> <a href=#>destino-sobre</a> <a href=#>destino-encima</a> <a href=#>destino-entrada</a> <a href=#>destino-salida</a> <a href=#>más ligero</a> <a href=#>copia</a> <a href=#>xor</a> </div></body><script type=text/javascript>window.onload = function(){ draw(source-over); var botones = document.getElementById(botones). getElementsByTagName(a); for (var i = 0; i < botones.longitud; i++) { botones[i].onclick = función(){ dibujar(este.texto); }}; función dibujar(compositeStyle){ var lienzo = document.getElementById(canvas contexto = lienzo.getContext(2d); contexto.clearRect(0, 0, lienzo.ancho, lienzo.alto); contexto.font = negrita 40px Arial; contexto.textAlign = centro; contexto.textBasedline = medio; context.fillText(globalCompositeOperation = +compositeStyle, canvas.width/2, 60); //dibuja un contexto rect.fillStyle = #F6082A; context.fillRect(300, 150, 500, 500); globalCompositeOperation = compositeStyle; contexto.fillStyle = #1611F5; contexto.beginPath(); contexto.moveTo(700, 250); contexto.lineTo(1000,750); contexto.lineTo(400, 750); </html>Los lectores pueden hacer clic en la etiqueta para observar diferentes efectos combinados. Los efectos son los siguientes:
Área de recorte:El método clip() corta cualquier forma y tamaño del lienzo original.
Consejo: Una vez que recorta un área, todos los dibujos posteriores se restringen al área recortada (no se puede acceder a otras áreas del lienzo). También puede guardar el área del lienzo actual usando el método save() antes de usar el método clip() y restaurarla en cualquier momento en el futuro (a través del método restaurar()).
El siguiente es un ejemplo del uso de un círculo para interceptar un rectángulo:
var lienzo = document.getElementById(lienzo); var contexto = lienzo.getContext(2d); contexto.beginPath(); contexto.fillStyle = #0C0101; contexto.beginPath(); contexto.fillStyle = #FFFDFD; contexto.arc(400,400,100,0,2*Math.PI); contexto.fill(); contexto.beginPath(); contexto.fillStyle = #F60825; 50);
Además de los atributos y métodos anteriores, también existen los siguientes métodos:
drawImage(): Dibuja una imagen, lienzo o video en el lienzo.
toDataURL(): guardar gráficos
isPointInPath(): Devuelve verdadero si el punto especificado está en la ruta actual, falso en caso contrario.
No daré ejemplos uno por uno aquí.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.