Este artigo apresenta principalmente 24 resumo do conhecimento básico da tela, que é muito abrangente e detalhada, e é recomendado a todos.
Agora resuma os pontos de conhecimento da tela da seguinte forma para que possam ser lidos a qualquer momento.
1. Preencha o retângulo de preenchimento (x, y, largura, altura); 2. Desenhe a retronatória da borda do retângulo (x, y, largura, altura); 3. Apague o retângulo ClearRect (x, y, largura, altura); 4. FillStyle = vermelho; O estilo pode ser cor, gradiente e imagem. 5. Strokestyle = vermelho; 6. a largura da largura da linha de linha do AVC = 4; 7. a forma do final da linha linecap = butt; Butt (encaixe)/redondo (círculo)/quadrado (quadrado), por padrão, ele é bumbum; 8. Estilo de interseção de linha LineJoin = Mitre; Mitre (canto afiado)/redondo (canto arredondado)/chanfro (canto chanfro), canto nítido padrão; 9. Comece a desenhar o caminho BEGNPATH (); 10. Termine o caminho ClosePath (); Depois de criar o caminho, se você deseja desenhar uma linha conectada ao ponto de partida do caminho, poderá ligar para o closePath (); 11. Desenhe arco arco (x, y, raio, startangle, endangle, verdadeiro/falso); 12. Draw arc arcto (x1, y1, x2, y2, raio) começa a desenhar um arco de um dia do ponto anterior, até x2, y2, e passa por x1, y1 com o raio dado; 13. Moveto (x, y); Mova o cursor de desenho para (x, y), sem desenhar linhas 14. lineto (x, y); Desenhe uma linha reta do ponto anterior 15. Curva Bezier quadrática: quadraticcurveto (cx, cy, x, y); Comece a desenhar a curva quadrática do ponto anterior, até que x, y, cx, cy sirva como ponto de controle. 16. Curva de Bezier cúbica : BezierCurveto (Cx1, Cy1, Cx2, Cy2, X, Y); Comece a desenhar a curva quadrática do ponto anterior, até que x, y, cx1, cy1 e cx2, cy2 sejam usados como pontos de controle. 17. ret (x, y, largura, altura); Comece dos pontos x, y, e a largura e a altura são especificadas por largura e altura, respectivamente. Este método desenha um caminho retangular, não uma forma separada. 18. Draw texto:(1) Preencha o texto: Filltext (Olá, x, y, largura); largura é a largura máxima de pixels opcional. Se o texto for maior que a largura máxima, o texto diminuirá para acomodar a largura máxima.
(2) Trecão de texto: StroKetext (Olá, x, y, largura); largura é a largura máxima de pixels opcional.
(3) Estilo de texto: Fonte = Bold 14px Arial;
(4) Alinhamento de texto horizontal: textalign = 'start'; // Iniciar, final, esquerda, direita, centro. Valor padrão: Iniciar. Alinhe o eixo vertical com o ponto de partida (x, y) do texto como o ponto de base.
(5) Alinhamento de texto vertical: TextBaseline = 'Alfabético'; // Top, suspenso, médio, alfabético, IdeaGraphic, Bottom. Valor padrão: alfabético. Alinhe o eixo horizontal com o ponto de partida (x, y) do texto como ponto de base.
(6) Largura do texto: var text = hello; var comprimento = context.measureText (texto); Texto do parâmetro é o texto que precisa ser desenhado
19. Mudança
(1) Gire (ângulo): gire o radiano do ângulo da imagem em torno da origem.
Você também pode usar o Transform (Math.cos (ângulo*Math.pi/180), Math.sin (Angle*Math.pi/180),-Math.sin (ângulo*Math.pi/180), Math.cos (ângulo*Math.pi/180), 0,0);
(2) Escala (x, y): Escala a imagem. Você também pode usar o transform (x, 0,0, y, 0,0);
(3) Traduzir (x, y): mova a origem coordenada para x, y. Depois de executar essa transformação, as coordenadas 0 e 0 se tornarão o ponto representado por x, y antes. Você também pode usar o transformamento (1,0,0,1, x, y);
(4) transformar (<número
(5) setTransform (<Mum>, <Mum>, <Mum>, <número>, x, y); redefinir a matriz de transformação para o estado padrão e depois chamar Transform ();
20. Combinação gráfica Copie o código