Canvas es parte de HTML5 y permite que los lenguajes de programación representen imágenes dinámicamente. Canvas define un área. El ancho y el alto del área se pueden definir mediante atributos HTML. El código JavaScript puede acceder al área y representar representaciones dinámicas en la página web a través de un conjunto completo de funciones de dibujo (API).
2. ¿Qué puede hacer Canvas?Juegos: No hay duda de que los juegos juegan un papel importante en el campo de HTML5. HTML5 es más tridimensional y más sofisticado que Flash en términos de visualización de imágenes basada en Web.
Producción de gráficos: la gente suele ignorar la producción de gráficos, pero la comunicación y la cooperación dentro de una empresa o entre empresas son inseparables de los gráficos. Algunos desarrolladores ahora usan HTML/CSS para crear íconos. Por supuesto, usar SVG (gráficos vectoriales escalables) para completar la producción de gráficos también es una muy buena manera.
Diseño de fuentes: la representación personalizada de fuentes estará completamente basada en web y se implementará utilizando tecnología HTML5.
Editor de gráficos: El editor de gráficos puede estar 100% basado en web.
Otro contenido que se puede incrustar en el sitio web: como gráficos, audio, video y muchos otros elementos se puede integrar mejor con la Web y no requiere ningún complemento.
3. Uso básico de Canvas1. Cuando utilice <canvas>, primero debe establecer sus atributos de ancho y alto y especificar el tamaño del área dibujable. Si solo especifica el ancho y el alto sin agregar estilos ni dibujar imágenes, el elemento no será visible en la página. .
<canvas id='draw' ancho='200px' alto='200px'></canvas>
2. Para dibujar una imagen, primero necesitamos obtener el lienzo y llamar al método getContext(), y luego pasar el nombre del contexto (2D/3D tiene dos operaciones de dibujo básicas: relleno (fillStyle) | trazo). ) | El valor predeterminado de estas dos propiedades es #000
var draw = document.getElementById('draw'); //Confirma si el navegador admite el elemento <canvas> if(draw.getContext){ var context = draw.getContext('2d'); el contexto context.strokeStyle = '#f00'; //El color de la pradera rellena interior context.fillStyle = '#0f0';}3. Utilice el método toDataURL() para exportar la imagen dibujada en el elemento <canvas>.
var draw = document.getElementById('draw');if(draw.getContext){ // Muestra la imagen, toDataURL() obtiene una cadena de cadena base64 var drawURL = draw.toDataURL('image/png') var image; = document.createElement('img'); image.src = drawURL; document.body.appendChild(imagen);4. Hay tres métodos principales para dibujar un rectángulo: fillRect() es el color de relleno del rectángulo, StrokeRect() es el trazo del rectángulo y clearRect() borra el rectángulo. Todos estos tres métodos reciben 4 parámetros x/y/w/h, las coordenadas de la esquina superior izquierda del rectángulo y el ancho y alto.
var draw = document.getElementById('draw'); //Confirma si el navegador admite el elemento <canvas> if(draw.getContext){ var context = draw.getContext('2d'); un borde verde context.fillStyle = '#f00' context.strokeStyle = '#0f0'; context.fillRect(10,10,50,50); //Dibuja un rectángulo verde con un trazo rojo context.fillStyle = '#0f0'; context.strokeStyle = '#f00'; , 50); contexto.fillRect(10,10,50,50); //Borrar un pequeño rectángulo donde los dos rectángulos se superponen context.clearRect(40,40,10,10);}5. Dibujar caminos. Se pueden crear formas y líneas complejas a través de caminos. Para dibujar un camino, primero llame al método beginPath() y luego use el siguiente método para dibujar el camino.
arco (x, y, radio, ángulo inicial, ángulo final, en sentido antihorario)
(x, y) coordenadas del centro del círculo, radio, (startAngle, endAngle) ángulo inicial y ángulo final, en sentido antihorario (falso)/antihorario (verdadero)
moveTo(x,y) mueve el cursor a (x,y) sin dibujar una línea. Se puede utilizar para modificar las llamadas coordenadas del punto anterior*
arcoA(x1,y1,x2,y2,radio)
Dibuja una curva comenzando desde el punto anterior hasta (x2, y2) y pasando por (x1, y1) con el radio dado
lineTo(x,y) dibuja una línea recta desde el punto anterior hasta (x,y)
rect(x,y,ancho,alto)
Dibuja un rectángulo a partir de (x, y), con ancho y alto como ancho y alto. Este método dibuja un trazado rectangular en lugar de las formas independientes dibujadas por StrokeRect() y fillRect().
//A continuación, dibuja un reloj sin números var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); //Inicia la ruta context.beginPath( ); /Dibuja el círculo exterior context.arc(100,100,99,0,2*Math.PI,false); //Dibuja el círculo interior context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Dibuja el minutero context.moveTo(100,100); ,15) ; //Dibujar la manecilla de hora context.moveTo(100,100); //Ruta del trazo context.stroke(); context.strokeStyle = '#f00';6. Hay dos métodos principales para dibujar texto, fillText() y StrokeText(), los cuales reciben cuatro parámetros |texto (texto a dibujar)|x|y|ancho máximo de píxel (opcional)|. basado en los siguientes tres atributos
estilo de texto de fuente, tamaño, fuente, etc.
textAlign alineación del texto |inicio|fin|izquierda|derecha|centro|
textBaseline La línea base del texto|arriba|colgante|medio|alfabético|ideográfico|abajo|
//Dibuja las 12 en punto en el dial context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle';
7. Transformación
rotar (ángel) gira el ángulo de la imagen en radianes alrededor del origen
scale(scaleX,scaleY) escala la imagen, x*scaleX,y*scaleY por defecto es 1
traducir(x,y) mueve el origen de coordenadas a (x,y)
var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //Iniciar ruta context.beginPath(); //Dibujar el círculo exterior context.arc( 100,100,99,0,2*Math.PI,false); //Dibuja el círculo interior context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //Transforma el origen context.translate(100,100); //Gira la manecilla context.rotate(1) //Dibuja el contexto del minutero. moveTo(0, 0); context.lineTo(0,-85); //Dibuja la manecilla de hora context.moveTo(0,0); //Ruta del trazo context.stroke(); context.strokeStyle = '#f00';8. Dibuja una imagen, drawImage()
var img = document.getElementByTagNames('imagen')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);9 parámetros: la imagen a dibujar, la imagen original |x|y|w|h|, la imagen de destino |x|y|w|h|
9. Sombras y degradados
Shadow tiene principalmente los siguientes valores de atributos:
var context = draw.getContext('2d'); //Establecer sombra context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; son cuatro parámetros |x1|y1|x2|y2| que son las coordenadas del punto inicial y las coordenadas del punto final var gradient = context.createLinearGradient(30,30,70,70); gradient.addColorStop(0,'#fff'); //0 significa inicio gradient.addColorStop(1,'#000'); El atributo de gradiente definido context.fillStyle = gradient //Colocar el gradiente al llenar context.fillRect(30,30,50,50);Cree un gradiente radial createRadialGradient(), los seis parámetros |x1|y2|radius1|x2|y2|radius2| son el centro y el radio del primer círculo y el centro y el radio del segundo círculo, respectivamente.
10. Utilizando datos de imagen, puede obtener los datos de la imagen original a través de getImageData(). Cuatro parámetros |x|y|w|h|. Cada objeto ImageData tiene tres atributos, ancho/alto/datos. Los datos son una matriz que almacena los datos de cada píxel internamente. El valor de cada elemento está entre 0 y 255.
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, rojo = datos[0], verde = datos[1], azul = datos[2], alfa = datos[3]; Un filtro gris var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; //Dibuja la imagen original context.drawImage(img,0,0,100,100); Obtener datos de imagen imageData = context.getImageData(0,0,img.width,img.height data = imageData.data); for(i=0,len=data.length;i<len;i+=4){ rojo = datos[i]; verde = datos[i+1]; i+3]; //Calcular el promedio de rgb promedio = Math.floor((red+green+blue)/3 //Establecer el valor del color data[i] = Average data[i+1] = Average; ; datos[i+2] = promedio; } imageData.data = data; //Dibujar datos en el lienzo context.putImageData(imageData,0,0)}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.