Descripción El HTML5 <canvas>
Sin embargo, el <canvas>
El getContext() método devuelve un objeto que proporciona métodos y propiedades para dibujar sobre 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 mucho más - en el lienzo.
Soporte para el navegador Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.
Elemento <canvas> 4.0 9.0 2.0 3.1 9.0
Internet Explorer 9, Firefox, Opera, Chrome, Safari y apoyo <canvas>
Nota: Internet Explorer 8 y versiones anteriores, no son compatibles con el <canvas>
Colores, estilos y sombras Propiedad Descripción fillStyle Establece o devuelve el color, degradado o un motivo utilizado para rellenar 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
Método Descripción
createLinearGradient() Crea un gradiente lineal (para usar en el contenido de la lona) createPattern() Se repite un elemento especificado en la dirección especificada createRadialGradient() Crea un degradado radial / circular (para usar en el contenido de la lona) addColorStop() Especifica los colores y las posiciones de parada en un objeto de gradiente
Estilos de línea Propiedad Descripción lineCap Establece o devuelve el estilo de las tapas de los extremos de una línea 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 rectángulo "lleno" strokeRect() Dibuja un rectángulo (sin relleno) clearRect() Borra los píxeles específicos dentro de un rectángulo dado
Caminos Método Descripción fill() Rellena el dibujo actual (ruta) stroke() En realidad dibuja el camino que has 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() Introduce una nueva letra y crea una línea a ese punto desde 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 cuadrática de Bézier bezierCurveTo() Crea una curva de Bezier arc() Crea un arco / curva (utilizado para crear círculos, o partes de círculos) arcTo() Crea un arco / curva entre dos tangentes isPointInPath() Devuelve true si el punto especificado se encuentra en el trayecto 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() Remaps la posición (0,0) en el lienzo transform() Sustituye a la matriz de transformación actual para el dibujo setTransform() Restablece la transformación actual a la matriz de identidad. A continuación, se ejecuta transformar ()
Texto Propiedad Descripción font Establece o devuelve las propiedades de la fuente de corriente para el contenido de texto textAlign Establece o devuelve la alineación actual de contenido de texto textBaseline Establece o devuelve la línea base del texto actual seguidos en la elaboración de texto
Método Descripción fillText() Dibuja texto "lleno" en el lienzo strokeText() Dibuja texto en el lienzo (sin relleno) measureText() Devuelve un objeto que contiene el ancho 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 la imagen (de un objeto especificado ImageData) de nuevo en el lienzo
composición Propiedad Descripción globalAlpha Establece o devuelve el valor alfa o la transparencia actual del dibujo 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()