Para detalhes, o resumo da API comum de tela HTML5 (2)-Drawing API

A tela pode desenhar muitos estilos maravilhosos e efeitos bonitos.

Ao pintar, a tela é equivalente aos tecidos, e o contexto é equivalente a pincéis.

Moveto (x0, y0): mova o pincel atual (ICTX) para esta posição (x0, y0).

Lineto (x1, y1): desenhe uma linha reta da posição atual (x0, y0) para (x1, y1).

BeginPath (): Abra um caminho ou redefina o caminho atual.

ClosePath (): Voltar ao ponto de partida do caminho do ponto atual, ou seja, a posição do início do início, evite e caminho anterior.

Stroke (): Desenhe. Esta função deve ser adicionada para desenhar figuras, portanto, isso deve ser colocado no final.

 var icanvas = documental.getElementById (icanvas); ();

Efeito:

Observe aqui que, se o close -path for colocado atrás da função de golpe, ela não será desenhada em uma linha fechada, porque é desenhada antes de fechada; portanto, a linha reta à esquerda não será desenhada.

LineCap: estilo de terminal de linha, bunda, rand, quadrado.

Linejoin: O estilo de ponto de virada quando as duas linhas estão se cruzando.

MITERLIMET: Se o comprimento do sedimento exceder o valor do Miterlimit, o canto será exibido no tipo de linhagem chanfrado.

Largura de linha: largura da linha

Strokestyle: cor de linha, gradiente (objeto de gradiente definido), modo. context.strokesty =#333;

 var iCanvas = documental.getElementById (ICANVAS); , 10); Diagonal preto novamente, um total de 3 linhas. Icx.strokestyle =#000000;

BEGIN e CLOSE não podem aparecer em pares.

Arco (x, y, raio, startangle, endangle, anti -horário): desenhar curva, raio é um raio da curva, startangle, ângulo de partida de endangle e ângulo final, com arco (math.pi/180)*Valor do ângulo, anticlockw ISE Unid

Arcto (x1, y1, x2, y2, raio): desenhe a curva antes das duas linhas de corte.

 Icx.beginpath (); / Crie arcs ictx.lineto (150.120);

Desenhe a conexão do ponto de partida e do ponto final horizontal da linha horizontal para o ponto final da configuração da linha horizontal.

Quadraticcurveto (x1, y1, x2, y2): duas curva de bessel. (X1, y1) As coordenadas do ponto de controle, (x2, y2) as coordenadas do ponto final

Beziercurveto (x1, y1, x2, y2, x, y): três curvas de bessel. (X1, y1) As coordenadas do ponto de controle 1, (x2, y2) coordenadas do ponto de controle 2 (x, y) pontos finais.

A curva Bessel é muito útil ao desenhar algumas curvas muito suaves.

Rect (): Crie retângulo;

filect (x, y, largura, altura): desenhe o retângulo preenchido: (x, y) ponto de partida, largura, altura retangular largura altura altura da altura da altura da altura da altura da altura da altura

strokerect (): desenhe uma estrutura de arame retangular

ClearRect (): limpe o retângulo.

 Ictx.fillstyle =#0000ff;

Filtyle: defina a cor, gradiente ou padrão (Patten);

Strokestyle: cor, gradiente ou padrão de pincel

ShadowColor: Shadow Yanse

Shadowblur: nível borrado

Shadowoffsetx: Distância Horizontal da Sombra

Shadowoffsety: Distância Vertical da sombra

 Ictx.shadowblur = 20;

CreateLineargradiente (X1, Y1, X2, Y2): Desenhe o gradiente linear, (X1, Y1) é o ponto de partida do gradiente (x2, y2) é o ponto final do gradiente.

CreaterRadialGradient (x1, y1, r1, x2, y2, r2): gradiente radial: (x1, y1) é o ponto de partida do gradiente, r1 é o raio (x2, y2) é o ponto final do gradiente, r2 é o raio do ponto final;

Ambas as notas precisam ser usadas

AddColorsStop (Stop, Color) está definido para definir o processo de gradiente e o valor é de 0,0 a 1,0.

 vard = ictx.createlinearadient (0,0,170,0); // O gradiente aqui é um objeto, que é usado para passar o valor (200.150.150.100);

CreatePattern (imagem, repita | repetição-x | repetição-y | sem repetição): a imagem é um objeto de imagem e os parâmetros subsequentes são usados ​​para definir o método repetitivo da imagem.

preenchimento (): preencha o caminho atual.

ISPointinPath (): ictx.ispointinpath (x, y); determine se esse ponto está localizado no caminho atual

Remova a tela: obtenha a largura e a altura da tela, icanvas.Height, icanvas.width;

Modifique a largura da tela: icanvas.width = '200';

Globalpha: Defina a transparência, apenas 0 ~ 1 número.

Todataurl: icanvas.todataurl (tipo, encerridades), esta função retorna um URI de uma imagem64 na imagem, os parâmetros estão disponíveis, o tipo pode definir tipos de imagem como imagem/jpeg, imagem/webp, padrão é imagem/p default ng; é um número de 0 ~ 1 é usado para definir a qualidade da imagem de imagem/jpeg, imagem/webp e digitar em outros formatos definidos, este parâmetro é inválido.

Clip (): A tela de qualquer forma e tamanho da tela e, em seguida, todos os desenhos serão limitados à área de alfaiataria. Esse método é geralmente usado com caminhos como formas redondas retangulares.

 ICTX.arc (100,100,50, Math.pi/180)*0, (Math.pi/180)*360, verdadeiro); .

Se você ainda deseja operar a tela externa, use a função Salvar () para salvar antes de cortar e use a função RESTORE () para restaurar o estado salvo anteriormente após o corte, mas a operação no meio não desaparecerá.

O acima é todo o conteúdo deste artigo.