Ua
En
De
Fr
HTML Referencia del lienzo (canvas)
HTML Referencia de lienzo (canvas)
La etiqueta HTML <canvas> se utiliza para dibujar gráficos, sobre la marcha, mediante secuencias de comandos (normalmente JavaScript).
Para obtener más información sobre <canvas>, lea nuestro tutorial de HTML Canvas.
Colores, estilos y sombras
| Propiedad |
Descripción |
| fillStyle |
Establece o devuelve el color, degradado o patrón utilizado para rellenar el dibujo |
| strokeStyle |
Establece o devuelve el color, degradado o patrón utilizado para los trazos |
| shadowColor |
Establece o devuelve el color que se utilizará para las sombras |
| shadowBlur |
Establece o devuelve el nivel de desenfoque de las sombras |
| shadowOffsetX |
Establece o devuelve la distancia horizontal de la sombra desde la forma |
| shadowOffsetY |
Establece o devuelve la distancia vertical de la sombra desde la forma |
| Método |
Descripción |
| createLinearGradient() |
Crea un degradado lineal (para usar en el contenido del lienzo) |
| createPattern() |
Repetir un elemento específico en la dirección especificada |
| createRadialGradient() |
Crea un degradado radial/circular (para usar en el contenido del lienzo) |
| addColorStop() |
Especificar los colores y las posiciones de parada en un objeto degradado |
Estilos de línea
| Propiedad |
Descripción |
| lineCap |
Establece o devuelve el estilo de los extremos de una línea |
| lineJoin |
Establece o devuelve el tipo de esquina creada cuando dos líneas se encuentran |
| lineWidth |
Establece o devuelve el ancho de línea actual |
| miterLimit |
Establece o devuelve la longitud máxima de inglete |
Rectángulos
| Método |
Descripción |
| rect() |
Crea un rectángulo |
| fillRect() |
Dibuja un rectángulo "relleno" |
| strokeRect() |
Dibuja un rectángulo (sin relleno) |
| clearRect() |
Borra los píxeles especificados dentro de un rectángulo determinado |
Caminos
| Método |
Descripción |
| fill() |
Rellena el dibujo actual (ruta) |
| stroke() |
Realmente dibuja el camino que has definido. |
| beginPath() |
Comienza una ruta o restablece la ruta actual |
| moveTo() |
Mueve la ruta al punto especificado en el lienzo, sin crear una línea |
| closePath() |
Crea una ruta desde el punto actual hasta el punto inicial |
| lineTo() |
Agrega un nuevo punto y crea una línea hasta ese punto desde el último punto especificado en el lienzo |
| clip() |
Recorta una región de cualquier forma y tamaño del lienzo original |
| quadraticCurveTo() |
Crea una curva de Bézier cuadrática |
| bezierCurveTo() |
Crea una curva de Bézier cúbica |
| arc() |
Crea un arco/curva (usado para crear círculos o partes de círculos) |
| arcTo() |
Crea un arco/curva entre dos tangentes |
| isPointInPath() |
Devuelve verdadero si el punto especificado está en la ruta actual; en caso contrario, falso |
Transformaciones
| Método |
Descripción |
| scale() |
Escala el dibujo actual más grande o más pequeño |
| rotate() |
Gira el dibujo actual |
| translate() |
Reasigna la posición (0,0) en el lienzo |
| transform() |
Reemplazar la matriz de transformación actual para el dibujo |
| setTransform() |
Restablece la transformación actual a la matriz de identidad. Luego corre transform() |
Texto
| Propiedad |
Descripción |
| font |
Establece o devuelve las propiedades de fuente actuales para el contenido de texto |
| textAlign |
Establece o devuelve la alineación actual para el contenido del texto |
| textBaseline |
Establece o devuelve la línea base de texto actual utilizada al dibujar texto |
| Método |
Descripción |
| fillText() |
Dibuja texto "relleno" en el lienzo |
| strokeText() |
Dibuja texto en el lienzo (sin relleno) |
| measureText() |
Devuelve un objeto que contiene el ancho del texto especificado |
Dibujo de imagen
| Método |
Descripción |
| drawImage() |
Dibujar una imagen, lienzo o vídeo en el lienzo |
Manipulación de píxeles
| Propiedad |
Descripción |
| width |
Devuelve el ancho de un objeto ImageData |
| height |
Devuelve la altura de un objeto ImageData |
| data |
Devuelve un objeto que contiene datos de imagen de un objeto ImageData especificado |
| Método |
Descripción |
| createImageData() |
Crea un nuevo objeto ImageData en blanco |
| getImageData() |
Devuelve un objeto ImageData que copia los datos de píxeles del rectángulo especificado en un lienzo |
| putImageData() |
Vuelva a colocar los datos de la imagen (de un objeto ImageData específico) en el lienzo |
Composición
| Propiedad |
Descripción |
| globalAlpha |
Establece o devuelve el valor alfa o de transparencia actual del dibujo |
| globalCompositeOperation |
Establece o devuelve cómo se dibuja una nueva imagen en una imagen existente |
Otro
| Método |
Descripción |
| save() |
Guardar el estado del contexto actual |
| restore() |
Devuelve el estado y los atributos de la ruta previamente guardados |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
