Este artículo presenta principalmente 24 resumen de conocimiento básico del lienzo, que es muy completo y detallado, y se recomienda a todos.
Ahora resume los puntos de conocimiento del lienzo de la siguiente manera para que puedan leerse en cualquier momento.
1. Llene el rectángulo relleno (x, y, ancho, altura); 2. Dibuja el rectángulo del border Strokerect (x, y, ancho, altura); 3. Borrar el rectángulo ClearRect (x, y, ancho, altura); 4. FillStyle = rojo; El estilo puede ser color, gradiente e imagen. 5. Strokestyle = rojo; 6. El ancho de la línea de trazo de línea de línea = 4; 7. La forma del extremo de la línea Linecap = Butt; Butt (Docking)/Round (Circle)/Square (Square), de forma predeterminada es Butt; 8. Línea Intersección estilo LineJoin = Mitre; Mitre (esquina afilada)/redonda (esquina redondeada)/bisel (esquina de bisel), esquina afilada predeterminada; 9. Comience a dibujar el camino BeginPath (); 10. Termine el camino de la época (); Después de crear la ruta, si desea dibujar una línea conectada al punto de partida de la ruta, puede llamar a ClosePath (); 11. Dibujar arco de arco (x, y, radio, startangle, endangle, verdadero/falso); 12. Dibuja Arc Arcto (x1, y1, x2, y2, radio) comienza a dibujar un arco de un día desde el punto anterior, hasta x2, y2 y pasan a través de x1, y1 con el radio dado; 13. Moveto (x, y); Mueva el cursor de dibujo a (x, y), sin líneas de dibujo 14. Lineto (x, y); Dibuja una línea recta desde el punto anterior 15. Curva cuadrática de Bezier: cuadráticocurveto (cx, cy, x, y); Comience a dibujar la curva cuadrática desde el punto anterior, hasta que x, y, cx, cy sirvan como punto de control. 16. Curva cúbica de Bezier : Beziercurveto (CX1, Cy1, Cx2, Cy2, X, Y); Comience a dibujar la curva cuadrática desde el punto anterior, hasta que X, Y, Cx1, Cy1 y Cx2, CY2 se usan como puntos de control. 17. rect (x, y, ancho, altura); Comience desde los puntos X, Y, y el ancho y la altura se especifican por ancho y altura, respectivamente. Este método dibuja una ruta rectangular, no una forma separada. 18. Dibuja texto:(1) Texto de relleno: relleno (hola, x, y, ancho); el ancho es el ancho de píxel máximo opcional. Si el texto es mayor que el ancho máximo, el texto se encogerá para acomodar el ancho máximo.
(2) trazo de texto: stroceText (hola, x, y, ancho); el ancho es el ancho de píxel máximo opcional.
(3) estilo de texto: fuente = Bold 14px Arial;
(4) Alineación de texto horizontal: textalign = 'inicio'; // Inicio, finalización, izquierda, derecha, centro. Valor predeterminado: Inicio. Alinee el eje vertical con el punto de partida (x, y) del texto como punto base.
(5) Alineación de texto vertical: textBaseline = 'alfabético'; // superior, colgante, medio, alfabético, ideagraphic, fondo. Valor predeterminado: alfabético. Alinee el eje horizontal con el punto de partida (x, y) del texto como punto base.
(6) Ancho de texto: Var Text = Hello; var longitud = context.measurEtext (texto); El texto del parámetro es el texto que debe dibujarse
19. Cambiar
(1) Gire (ángulo): gire el ángulo radian de la imagen alrededor del origen.
También puede usar Transform (Math.Cos (Angle*Math.pi/180), Math.sin (Angle*Math.pi/180),-Math.sin (Angle*Math.pi/180), Math.Cos (Angle*Math.pi/180), 0,0);
(2) Escala (x, y): Escala la imagen. También puede usar transformación (x, 0,0, y, 0,0);
(3) Traducir (x, y): mueva el origen de la coordenada a x, y. Después de realizar esta transformación, las coordenadas 0 y 0 se convertirán en el punto representado por X, Y antes. También puede usar transformación (1,0,0,1, x, y);
(4) transformar (<número>, <número>, <número>, <número>, <número>, x, y);
(5) setTransform (<number>, <number>, <number>, <number>, x, y); restablecer la matriz de transformación al estado predeterminado y luego llamar a transform ();
20. Combinación gráfica Copiar el código