objeto de la lona
El objeto Canvas es nuevo en HTML5.
El HTML5 <canvas> etiqueta se utiliza para dibujar gráficos, sobre la marcha, con JavaScript.
Acceder a un objeto Canvas
Puede acceder a un <canvas> elemento mediante el uso de getElementById() :
Crear un objeto Canvas
Se puede crear un <canvas> elemento mediante el document. createElement() document. createElement() método:
Nota: La <canvas> elemento no tiene habilidades de dibujo de su propia (que es sólo un contenedor para gráficos) - debe utilizar una secuencia de comandos para dibujar realmente los gráficos.
El getContext() método devuelve un objeto que proporciona métodos y propiedades para la elaboración en el lienzo.
Esta referencia cubrirá las propiedades y métodos de la getContext("2d") objeto, que puede ser utilizado para dibujar texto, líneas, rectángulos, círculos, y más - en la lona.
Colores, estilos y sombras
| Propiedad | Descripción |
|---|
| fillStyle | Establece o devuelve el color, gradiente, o patrón utilizado para llenar el dibujo |
| strokeStyle | Establece o devuelve el color, degradado o un motivo utilizado para los accidentes cerebrovasculares |
| shadowColor | Establece o devuelve el color a utilizar para las sombras |
| shadowBlur | Establece o devuelve el nivel de desenfoque de sombras |
| shadowOffsetX | Establece o devuelve la distancia horizontal de la sombra de la forma |
| shadowOffsetY | Establece o devuelve la distancia vertical de la sombra de la forma |
Estilos de línea
| Propiedad | Descripción |
|---|
| lineCap | Establece o devuelve el estilo de las tapas de los extremos para una línea de |
| lineJoin | Establece o devuelve el tipo de esquina, creado 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 "filled" rectángulo |
| strokeRect() | Dibuja un rectángulo (no fill) |
| clearRect() | Borra los píxeles especificado dentro de un rectángulo dado |
Caminos
| Método | Descripción |
|---|
| fill() | Rellena el dibujo actual (path) |
| stroke() | En realidad dibuja el camino que ha definido |
| beginPath() | Comienza un camino, o restablece la ruta actual |
| moveTo() | Mueve la ruta de acceso al punto especificado en el lienzo, sin crear una línea |
| closePath() | Crea una ruta desde el punto actual de vuelta al punto de partida |
| lineTo() | Añade un nuevo punto y crea una línea desde ese punto hasta el último punto especificado en el lienzo |
| clip() | Clips de una región de cualquier forma y tamaño de la tela original |
| quadraticCurveTo() | Crea una curva de Bezier cuadrática |
| bezierCurveTo() | Crea una curva de Bezier cúbico |
| arc() | Crea un arco / curva (used to create circles, or parts of circles) |
| arcTo() | Crea un arco / curva entre dos tangentes |
| isPointInPath() | Devuelve true si el punto especificado está en el camino de la corriente, de lo contrario falso |
transformaciones
| Método | Descripción |
|---|
| scale() | Escala el dibujo actual grande o más pequeña |
| rotate() | Rota el dibujo actual |
| translate() | Reasigna el (0,0) posición en el lienzo |
| transform() | Sustituye a la matriz de transformación actual para el dibujo |
| setTransform() | Restablece la transformación actual de la matriz de identidad. Luego corre transform() |
Texto
| Propiedad | Descripción |
|---|
| font | Establece o devuelve las propiedades de la fuente de corriente para el contenido del texto |
| textAlign | Establece o devuelve la alineación actual de contenido de texto |
| textBaseline | Establece o devuelve el texto actual línea de base utilizados en la elaboración de texto |
| Método | Descripción |
|---|
| fillText() | Llama la "filled" de texto en el lienzo |
| strokeText() | Dibuja texto en el lienzo (no fill) |
| measureText() | Devuelve un objeto que contiene la anchura del texto especificado |
Dibujo imagen
| Método | Descripción |
|---|
| drawImage() | Dibuja una imagen, lona, o un vídeo en el lienzo |
La manipulación de píxeles
| Propiedad | Descripción |
|---|
| width | Devuelve la anchura de un objeto ImageData |
| height | Devuelve la altura de un objeto ImageData |
| data | Devuelve un objeto que contiene datos de imagen de un objeto especificado ImageData |
| Método | Descripción |
|---|
| createImageData() | Crea un nuevo objeto en blanco ImageData |
| getImageData() | Devuelve un objeto ImageData que copia los datos de píxel para el rectángulo especificado en un lienzo |
| putImageData() | Pone los datos de imagen (from a specified ImageData object) de vuelta sobre el lienzo |
composición
| Propiedad | Descripción |
|---|
| globalAlpha | Establece o devuelve el valor alfa o la transparencia del dibujo actual |
| globalCompositeOperation | Establece o devuelve cómo una nueva imagen se dibujan en una imagen existente |
Otro
| Método | Descripción |
|---|
| save() | Guarda el estado del contexto actual |
| restore() | Devuelve el estado y los atributos de ruta previamente guardado |
| createEvent() | |
| getContext() | |
| toDataURL() | |
Propiedades estándar y Eventos
El objeto de la lona también es compatible con el estándar de propiedades y eventos .
Páginas relacionadas
Tutorial de HTML: HTML5 Canvas
Referencia HTML: HTML <canvas> etiqueta