Canvas de HTML
El lienzo HTML proporciona funciones más primitivas, adecuadas para el procesamiento de píxeles, la renderización dinámica y el dibujo de grandes volúmenes de datos
¿Qué es el lienzo HTML
HTML5 El tag <canvas> se utiliza para dibujar gráficos dinámicamente a través de un script (generalmente JavaScript).
Sin embargo, el elemento <canvas> no tiene sus propias funciones de dibujo (solo es un contenedor de gráficos).-Es necesario usar un script para dibujar realmente los gráficos.
El método getContext() devuelve un objeto que proporciona métodos y propiedades para dibujar en el lienzo.
Esta referencia explicará getContext("2las propiedades y métodos del objeto d) que se pueden usar para dibujar texto, líneas, cuadros, círculos, etc. en el lienzo
Compatibilidad de navegador
IEFirefoxOperaChromeSafari
Internet Explorer 9y Opera, Chrome y Safari admiten las propiedades y métodos del tag <canvas>.
Atención:Internet Explorer 8 y versiones anteriores de Internet Explorer no admiten el elemento <canvas>.
Color, estilo y sombra
| Atributo | Descripción |
| fillStyle | Establecer o devolver el color, el gradiente o el patrón utilizado para rellenar el dibujo. |
| strokeStyle | Establecer o devolver el color, el gradiente o el patrón utilizado para el trazo. |
| shadowColor | Establecer o devolver el color utilizado para la sombra. |
| shadowBlur | Establecer o devolver el nivel de borrosidad utilizado para la sombra. |
| shadowOffsetX | Establecer o devolver la distancia horizontal entre la sombra y la forma. |
| shadowOffsetY | Establecer o devolver la distancia vertical entre la sombra y la forma. |
Estilo de línea
| Atributo | Descripción |
| lineCap | Establecer o devolver el estilo del extremo del borde de la línea. |
| lineJoin | Establecer o devolver el tipo de esquina creado al intersectar dos líneas. |
| lineWidth | Establecer o devolver el ancho de línea actual. |
| miterLimit | Establecer o devolver la longitud máxima del ángulo de esquina. |
Rectángulo
| Método | Descripción |
| rect() | Crea un rectángulo. |
| fillRect() | Dibuja un rectángulo "rellenado". |
| strokeRect() | Dibuja un rectángulo (sin relleno). |
| clearRect() | Borra los píxeles especificados dentro del rectángulo dado. |
Ruta
| Método | Descripción |
| fill() | Rellena la pintura actual (ruta). |
| stroke() | Dibuja la ruta definida. |
| beginPath() | Empieza una nueva 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 que va desde el punto actual hasta el punto de partida. |
| lineTo() | Añade un nuevo punto y crea una línea en el lienzo desde ese punto hasta el punto especificado. |
| clip() | Corta una región de cualquier forma y tamaño del lienzo original. |
| quadraticCurveTo() | Crea una curva bézier de segundo grado. |
| bezierCurveTo() | Crea una curva bézier de tercer grado. |
| arc() | Crea un arco/Curva (usada para crear círculos o partes de círculos). |
| arcTo() | Crea un arco entre dos tangentes./Curva |
| isPointInPath() | Devuelve true si el punto especificado se encuentra en la ruta actual, de lo contrario devuelve false. |
Transformación
| Método | Descripción |
| scale() | Ajusta el tamaño de la pintura actual a mayor o menor. |
| rotate() | Gira la pintura actual. |
| translate() | Remapea la posición (0,0) actual del lienzo. |
| transform() | Reemplazar la matriz de transformación actual de la pintura. |
| setTransform() | Restablecer la transformación actual a la matriz de unidad. Luego ejecuta transform(). |
Texto
| Atributo | Descripción |
| font | Establecer o devolver las propiedades de fuente actual del contenido del texto. |
| textAlign | Establecer o devolver el alineamiento actual del contenido del texto. |
| textBaseline | Establecer o devolver la línea base actual utilizada para dibujar texto. |
| Método | Descripción |
| fillText() | Dibujar texto "rellenado" en el lienzo. |
| strokeText() | Dibujar texto en el lienzo (sin relleno). |
| measureText() | Devuelve un objeto que contiene el ancho de texto especificado. |
Dibujo de imagen
| Método | Descripción |
| drawImage() | Dibujar imágenes, lienzo o video en el lienzo. |
Operaciones de píxeles
| Atributo | 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 de un rectángulo especificado en el lienzo. |
| putImageData() | Devuelve los datos de imagen (del objeto ImageData especificado) al lienzo. |
Composición
| Atributo | Descripción |
| globalAlpha | Establece o devuelve el valor actual de alpha o transparencia del dibujo. |
| globalCompositeOperation | Establece o devuelve cómo se debe dibujar una nueva imagen sobre una imagen existente. |
Otro
| Método | Descripción |
| save() | Guarda el estado actual del entorno. |
| restore() | Devuelve el estado y las propiedades del camino guardado anteriormente. |
| createEvent() | |
| getContext() | |
| toDataURL() | |