Este artículo presenta principalmente la guía para usar el método de lienzo de HTML5. Es muy simple y claro. Es un muy buen artículo. Te lo recomiendo aquí.
Método de lienzo
guardar () ahorra el estado del entorno actual
restaurar () Devuelve el estado de ruta y las propiedades que se han guardado antes
createEvent ()
getContext () Devuelve un objeto que indica la API necesaria para acceder a la función de dibujo
Todataupl () Devuelve la URL de la imagen de lienzo
Propiedades y métodos de estilos de línea
propiedad:
Linecap establece o devuelve el estilo final del punto final de la línea
LineJoin Conjuntos o devuelve el tipo de esquina creado cuando dos líneas se cruzan.
LineWidth establece o devuelve el ancho de la línea actual.
MITERLIMIT establece o devuelve la longitud máxima de inglete
Propiedades y métodos de color, estilo y sombra
propiedad
Fillstyle Conjuntos o devuelve el color, el gradiente o el modo utilizado para llenar la pintura
strokestyle set o devuelve el color, el gradiente o el modo utilizado para los trazos
ShadowColor set o devuelve el color utilizado para la sombra
Shadowblur establece o devuelve el nivel de desenfoque utilizado para las sombras
shadowoffsetx establece o devuelve la distancia horizontal de la sombra a la forma
shadowoffsety se establece o devuelve la distancia vertical de la sombra a la forma
método
CreateLineArgradient () crea gradiente lineal (utilizado en el contenido de lienzo)
CreatePattern () repite el elemento especificado en la dirección especificada
creeateradialgradient () crea gradientes radiales/anillo (utilizado en el contenido de lienzo)
addColorStop () especifica la posición de color o parada en el objeto de gradiente
Método de ruta
llenar () llena el dibujo actual (ruta)
Stroke () dibuja el camino definido
beginPath () inicia una ruta o restablece la ruta actual
Moveto () mueve la ruta al punto especificado en el lienzo sin crear líneas
ClosePath () crea una ruta desde el punto actual hasta el punto de partida
lineto () agrega un nuevo punto para crear una línea desde ese punto hasta el último punto especificado
Clip () corta un área de cualquier forma y tamaño del lienzo original
QuadraticCurVeto () crea la segunda curva Bezier
Beziercureto () crea la última curva de Bezier
Arc () crea arco/curva (utilizado para crear círculos o círculos parciales)
arcto () crea un arco/curva entre dos tangentes
isPointInpath () Devuelve un valor booleano si el punto especificado está en la ruta actual
rectángulo
Rect () crea un rectángulo
Fillrect () dibuja el rectángulo relleno
Strokerect () dibuja rectángulo (sin relleno)
ClearRect () borra los píxeles especificados dentro del rectángulo dado
Establecer propiedades y métodos de texto
propiedad:
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
La configuración de TextBaseline devuelve la línea de base de texto actual utilizada al dibujar texto.
método:
FillText () dibuja texto relleno en lienzo
stroketext () dibuja texto en lienzo (sin relleno)
medirettext () Devuelve un objeto que contiene el ancho de texto especificado
Método de conversión
escala () escala el gráfico actual a más grande o más pequeño
girar () gira el dibujo de corriente
traducir () reasignar la posición (0,0) de la camisa floral
transform () reemplaza la matriz de transformación actual del dibujo
setTransform () restablece la conversión actual a la matriz de la unidad. Luego ejecuta transformar ()