HTML DOM CanvasObjeto
Objeto Canvas
El objeto Canvas es nuevo en HTML5.
La etiqueta HTML5 <canvas> se utiliza para dibujar imágenes (mediante scripts, generalmente JavaScript).
Acceder al objeto Canvas
Puede utilizar getElementById() para acceder al elemento <canvas>:
var x = document.getElementById("myCanvas");
Pruébalo
Crear un objeto Canvas
Puede utilizar el método document.createElement() para crear el elemento <canvas>:
var x = document.createElement("CANVAS");
Pruébalo
Nota:El elemento <canvas> en sí no tiene capacidad de dibujo (es solo un contenedor de gráficos): debe usar scripts para realizar la tarea de dibujo real.
El método getContext() devuelve un objeto que proporciona métodos y propiedades para dibujar en el lienzo.
Este manual proporciona las propiedades y métodos completos del objeto getContext("2d"), que se pueden utilizar para dibujar texto, líneas, rectángulos, círculos, etc. en el lienzo.
Colores, estilos y sombras
| Propiedades |
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 el trazo. |
| shadowColor |
Establece o devuelve el color utilizado para las sombras. |
| shadowBlur |
Establece o devuelve el nivel de desenfoque utilizado para las sombras. |
| shadowOffsetX |
Establece o devuelve la distancia horizontal entre la sombra y la forma. |
| shadowOffsetY |
Establece o devuelve la distancia vertical entre la sombra y la forma. |
| Métodos |
Descripción |
| createLinearGradient() |
Crea un degradado lineal (utilizado en el contenido del lienzo). |
| createPattern() |
Repite el elemento especificado en la dirección especificada. |
| createRadialGradient() |
Crea un degradado radial/circular (utilizado en el contenido del lienzo). |
| addColorStop() |
Especifica los colores y las posiciones de parada en el objeto de degradado. |
Estilos de línea
| Propiedades |
Descripción |
| lineCap |
Establece o devuelve el estilo de los extremos de la línea. |
| lineJoin |
Establece o devuelve el tipo de esquina que se crea cuando dos líneas se cruzan. |
| lineWidth |
Establece o devuelve el ancho de línea actual. |
| miterLimit |
Establece o devuelve la longitud máxima de inglete. |
Rectángulos
| Métodos |
Descripción |
| rect() |
Crea un rectángulo. |
| fillRect() |
Dibuja un rectángulo "relleno". |
| strokeRect() |
Dibuja un rectángulo (sin relleno). |
| clearRect() |
Limpia los píxeles especificados dentro del rectángulo dado. |
Rutas
| Métodos |
Descripción |
| fill() |
Rellena el dibujo actual (ruta). |
| stroke() |
Dibuja la ruta definida. |
| beginPath() |
Inicia una ruta o restablece la ruta actual. |
| moveTo() |
Mueve la ruta a un 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 luego crea una línea desde ese punto hasta el último punto especificado en el lienzo. |
| clip() |
Recorta un área 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 (para crear círculos o partes de un círculo). |
| arcTo() |
Crea un arco/curva entre dos tangentes. |
| isPointInPath() |
Devuelve true si el punto especificado está en la ruta actual; de lo contrario, devuelve false. |
Transformaciones
| Métodos |
Descripción |
| scale() |
Escala el dibujo actual a un tamaño mayor o menor. |
| rotate() |
Rota el dibujo actual. |
| translate() |
Reasigna la posición (0,0) en el lienzo. |
| transform() |
Reemplaza la matriz de transformación actual del dibujo. |
| setTransform() |
Restablece la transformación actual a la matriz de identidad. Luego ejecuta transform(). |
Texto
| Propiedades |
Descripción |
| font |
Establece o devuelve las propiedades de fuente actuales del contenido de texto. |
| textAlign |
Establece o devuelve la alineación actual del contenido de texto. |
| textBaseline |
Establece o devuelve la línea base de texto actual utilizada al dibujar texto. |
| Métodos |
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 imágenes
| Métodos |
Descripción |
| drawImage() |
Dibuja una imagen, un lienzo o un video en el lienzo. |
Operaciones de píxeles
| Propiedades |
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étodos |
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 el lienzo. |
| putImageData() |
Coloca los datos de imagen (del objeto ImageData especificado) de vuelta en el lienzo. |
Composición
| Propiedades |
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 sobre una imagen existente. |
Otros
| Métodos |
Descripción |
| save() |
Guarda el estado del entorno actual. |
| restore() |
Devuelve el estado y las propiedades de la ruta guardados anteriormente. |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
Atributos y eventos estándar
El objeto Canvas también admite estándaresAtributosyEventos。
Artículos relacionados
Tutorial de HTML:Elemento HTML <canvas>
Otras extensiones