Manual de referencia de Canvas HTML
Manual de referencia de Canvas HTML
HTML <canvas> etiqueta se utiliza para dibujar gráficos dinámicamente a través de scripts (generalmente JavaScript).
Para obtener más información sobre <canvas>, lea nuestra guía de HTML Canvas.
Color, estilo y sombra
| Propiedad |
Descripción |
| fillStyle |
Establecer o devolver el color, el gradiente o el patrón del relleno |
| strokeStyle |
Establecer o devolver el color, el gradiente o el patrón del trazo |
| shadowColor |
Establecer o devolver el color del sombreado |
| shadowBlur |
Establecer o devolver el nivel de borroso del sombreado |
| shadowOffsetX |
Establecer o devolver la distancia horizontal del sombreado desde la forma |
| shadowOffsetY |
Establecer o devolver la distancia vertical del sombreado desde la forma |
| Método |
Descripción |
| createLinearGradient() |
Crear un gradiente lineal (usado en el contenido del lienzo) |
| createPattern() |
Repetir el elemento especificado en la dirección especificada |
| createRadialGradient() |
Crear un gradiente radial/circular (usado en el contenido del lienzo) |
| addColorStop() |
Especificar los colores y las posiciones de parada del gradiente dentro del objeto de gradiente |
Estilo de línea
| Propiedad |
Descripción |
| lineCap |
Establecer o devolver el estilo del extremo final de la línea |
| lineJoin |
Establecer o devolver el tipo de esquina creada al intersectar dos líneas |
| lineWidth |
Establecer o devolver el ancho actual de la línea |
| miterLimit |
Establecer o devolver la longitud máxima del ángulo de esquina |
Rectángulo
| Método |
Descripción |
| rect() |
Crear un rectángulo |
| fillRect() |
Dibujar un rectángulo 'rellenado' |
| strokeRect() |
Dibujar un rectángulo (sin relleno) |
| clearRect() |
Borrar los píxeles especificados dentro del rectángulo dado |
Trayectoria
| Método |
Descripción |
| fill() |
Rellenar el dibujo actual (trayectoria) |
| stroke() |
Dibujar la trayectoria definida |
| beginPath() |
Iniciar una nueva trayectoria o restablecer la trayectoria actual |
| moveTo() |
Mover la trayectoria al punto especificado en el lienzo sin crear una línea |
| closePath() |
Crear una trayectoria que regrese al punto de partida desde el punto actual |
| lineTo() |
Agregar un nuevo punto y crear una línea desde ese punto hasta el punto especificado al final del lienzo |
| clip() |
Cortar una región de cualquier forma y tamaño del lienzo original |
| quadraticCurveTo() |
Crea una curva bezier cuadrática |
| bezierCurveTo() |
Crea una curva cúbica bezier |
| arc() |
Crea un arco o curva (usado para crear círculos o partes de círculos) |
| arcTo() |
Crea un arco o curva entre dos tangentes |
| isPointInPath() |
Devuelve true si el punto especificado está en la trayectoria actual, de lo contrario devuelve false |
Transformación
| Método |
Descripción |
| scale() |
Escala el dibujo actual para mayor o menor |
| rotate() |
Gira el dibujo actual |
| translate() |
Remapea la posición (0,0) del lienzo |
| transform() |
Reemplaza la matriz de transformación actual del dibujo |
| setTransform() |
Restablece la transformación actual a la matriz de unidad. Luego ejecuta transform() |
Texto
| Propiedad |
Descripción |
| font |
Establece o devuelve las propiedades de fuente del contenido del texto actual |
| textAlign |
Establece o devuelve el alineamiento actual del contenido del texto |
| textBaseline |
Establece o devuelve la línea de base actual utilizada para dibujar texto |
| Método |
Descripción |
| fillText() |
Dibuja texto |
| strokeText() |
Dibuja texto en el lienzo (sin relleno) |
| measureText() |
Devuelve un objeto que contiene la anchura del texto especificado |
Dibujo de imagen
| Método |
Descripción |
| drawImage() |
Dibuja una imagen, un lienzo o un video en el lienzo |
Operaciones de píxeles
| Propiedad |
Descripción |
| width |
Devuelve el ancho del objeto ImageData |
| height |
Devuelve la altura del objeto ImageData |
| data |
Devuelve un objeto que contiene los datos de imagen del objeto ImageData especificado |
| Método |
Descripción |
| createImageData() |
Crea un nuevo objeto ImageData vacío |
| getImageData() |
Devuelve un objeto ImageData, que contiene los datos de píxeles copiados del rectángulo especificado en el lienzo |
| putImageData() |
Coloca los datos de imagen (desde el objeto ImageData especificado) en el lienzo |
Composición
| Propiedad |
Descripción |
| globalAlpha |
Establece o devuelve el valor alpha o transparencia actual del dibujo |
| globalCompositeOperation |
Establece o devuelve cómo se dibuja la nueva imagen sobre la imagen existente |
Otro
| Método |
Descripción |
| save() |
Guarda el estado del entorno actual |
| restore() |
Devuelve el estado y las propiedades de la ruta guardada anteriormente |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
