Para más detalles, resumen de la API común de lona HTML5 (2) -API de goteo

El lienzo puede dibujar muchos estilos maravillosos y hermosos efectos.

Al pintar, el lienzo es equivalente a las telas, y el contexto es equivalente a los cepillos.

Moveto (x0, y0): mueva el pincel actual (ICTX) a esta posición (x0, y0).

Lineto (x1, y1): dibuje una línea recta desde la posición actual (x0, y0) a (x1, y1).

BeginPath (): Abra una ruta o restablezca la ruta actual.

ClosePath (): Volviendo al punto de partida de la ruta desde el punto actual, es decir, la posición del BeginPath anterior, Evitar y Path.

Stroke (): dibujar. Esta función debe agregarse para dibujar imágenes, por lo que esto debe colocarse al final.

 var icanvas = document.getElementById (iCanvas); ();

Efecto:

Tenga en cuenta aquí que si ClosePath se coloca detrás de la función de trazo, no se dibujará en una línea cerrada, porque se dibuja antes de cerrarse, por lo que no se dibujará la línea recta a la izquierda.

Linecap: estilo de punto final de línea, trasero, rand, cuadrado.

Linejoin: el estilo del punto de inflexión Cuando las dos líneas se cruzan.

MITERLIMET: si la longitud del sedimento excede el valor de Miterlimit, la esquina se mostrará en el tipo de bisel de LineJoin.

LineWidth: ancho de línea

Strokestyle: color de línea, gradiente (objeto de gradiente definido), modo. context.Strokesty =#333;

 var icanvas = document.getElementById (iCanvas); , 10) Diagonal negra nuevamente, un total de 3 líneas. Ictx.StrokStyle =#000000;

Beginpath y Closepath no pueden aparecer en pares.

Arco (x, y, radio, startangle, endangle, en sentido antihorario): la curva de dibujo, el radio es un radio curva, startangle, endangle, ángulo de inicio y ángulo de final Elementos

Arcto (x1, y1, x2, y2, radio): dibuje la curva antes de las dos líneas de corte.

 Ictx.beginpath (); / Crear arcs ictx.lineto (150,120);

Dibuje la conexión del punto de partida y el punto final horizontal de la línea horizontal hasta el punto final de la configuración de la línea horizontal.

QuadraticCurveto (x1, y1, x2, y2): dos curva bessel. (X1, y1) Las coordenadas del punto de control, (x2, y2) las coordenadas del punto final

Beziercurveto (x1, y1, x2, y2, x, y): tres curvas de bessel. (X1, y1) Las coordenadas del punto de control 1, (x2, y2) Punto de control 2 coordenadas (x, y) Puntos finales.

La curva de Bessel es muy útil al dibujar algunas curvas muy suaves.

Rect (): crea rectángulo;

Filecto (x, y, ancho, altura): Dibuja el rectángulo relleno: (x, y) Punto de partida, ancho, altura ancho rectangular altura altura altura altura altura

Strokerect (): dibuja un marco de cable rectangular

ClearRect (): borre el rectángulo.

 Ictx.fillstyle =#0000ff;

FillStyle: establezca el color, el gradiente o el patrón (Patten);

Strokestyle: color, gradiente o patrón de pincel

ShadowColor: Shadow Yanse

Shadowblur: Nivel bordeado

ShadowOffSetx: Distancia horizontal de la sombra

Shadowoffsety: Distancia vertical de la sombra

 Ictx.shadowblur = 20;

CreateLinealGradient (x1, y1, x2, y2): dibujar gradiente lineal, (x1, y1) es el punto de partida del gradiente, (x2, y2) es el punto final de gradiente.

Creatreadialgradient (x1, y1, r1, x2, y2, r2): gradiente radial: (x1, y1) es el punto de partida del gradiente, r1 es el radio, (x2, y2) es el punto final del gradiente, r2 es el radio del punto final;

Ambos grados deben usarse

AddColorStop (Stop, Color) está configurado para establecer el proceso de gradiente, y el valor es de 0.0 a 1.0.

 var grd = ictx. // El gradiente aquí es un objeto, que se usa para pasar el valor para llenar. (200,150,150,100);

CreatePattern (imagen, repetición | repetir-x | repetir y | no repetido): la imagen es un objeto de imagen, y los parámetros posteriores se utilizan para establecer el método repetitivo de la imagen.

relleno (): llene la ruta actual.

isPointInpath (): ICTX.IsPointInpath (x, y);

Retire el lienzo: obtenga el ancho y la altura del lienzo, iCanvas.Height, icanvas.width;

Modifique el ancho del lienzo: icanvas.width = '200';

GlobalPhA: Establezca la transparencia, solo 0 ~ 1 número.

Todataurl: icanvas.todataurl (type, enceroptions), esta función devuelve un URI de una imagen64 en imagen, los parámetros están disponibles, el tipo puede establecer tipos de imágenes como Image/JPEG, Image/WebP, IS IS IS IMPRESA/P NG NG es un número 0 ~ 1 para establecer la calidad de imagen de la imagen/jpeg, la imagen/webp, y escribir otros formatos establece este parámetro no es válido.

Clip (): El lienzo de cualquier forma y tamaño del lienzo, y luego todos los dibujos se limitarán al área de adaptación. Este método generalmente se usa con rutas como las formas rectangulares y redondas.

 ICTX.ARC (100,100,50, (Math.pi/180)*0, (Math.pi/180)*360, verdadero); ;.

Si aún desea operar el lienzo externo, use la función Guardar () para guardar antes de cortar, y use la función restauración () para restaurar el estado guardado previamente después del corte, pero la operación en el medio no desaparecerá.

Lo anterior es todo el contenido de este artículo.