Este artigo apresenta principalmente o guia para usar o método de tela de HTML5. É muito simples e claro. É um artigo muito bom. Eu recomendo para você aqui.
Método de tela
salvar () salva o status do ambiente atual
RESTORE () retorna o status do caminho e as propriedades que foram salvas antes
createevent ()
getContext () retorna um objeto indicando a API necessária para acessar a função de desenho
Todataupl () retorna o URL da imagem da tela
Propriedades e métodos de estilos de linha
propriedade:
LineCap define ou retorna o estilo final da linha
Linejoin define ou retorna o tipo de canto criado quando duas linhas se cruzam.
A largura de linha define ou retorna a largura da linha atual.
Miterlimit define ou retorna o comprimento máximo de mitra
Propriedades e métodos de cor, estilo e sombra
propriedade
Filtyle define ou retorna a cor, gradiente ou modo usado para preencher a pintura
Strokestyle define ou devolva a cor, gradiente ou modo usado para traços
ShadowColor Set ou retorne a cor usada para a sombra
Shadowblur define ou retorna o nível de desfoque usado para sombras
Shadowoffsetx define ou retorna a distância horizontal da sombra para a forma
Shadowoffsety define ou retorna a distância vertical da sombra para a forma
método
createLinearGradient () cria gradiente linear (usado no conteúdo de tela)
createPattern () repete o elemento especificado na direção especificada
CreaterRadialGradient () cria gradientes de radial/anel (usados no conteúdo da tela)
addColorStop () especifica a cor ou a posição de parada no objeto Gradiente
Método do caminho
preencher () preenche o desenho atual (caminho)
Stroke () desenha o caminho definido
BeginPath () inicia um caminho ou redefine o caminho atual
moveto () move o caminho para o ponto especificado na tela sem criar linhas
ClosePath () cria um caminho desde o ponto atual até o ponto de partida
lineto () adiciona um novo ponto para criar uma linha a partir desse ponto ao último ponto especificado
clip () corta uma área de qualquer forma e tamanho da tela original
quadraticcurveto () cria a segunda curva bezier
beziercureto () cria a última curva bezier
Arc () cria arco/curva (usado para criar círculos ou círculos parciais)
Arcto () cria um arco/curva entre duas tangentes
iSPointinPath () retorna um valor booleano se o ponto especificado estiver no caminho atual
retângulo
Rect () cria um retângulo
FILLRECT () desenha o retângulo preenchido
strokerect () desenha retângulo (sem preenchimento)
ClearRect () limpa os pixels especificados dentro do retângulo fornecido
Defina propriedades e métodos de texto
propriedade:
Fonte define ou retorna as propriedades atuais da fonte do conteúdo do texto
Textalign Definir ou retornar o alinhamento atual do conteúdo de texto
A configuração da linha de base de texto retorna a linha de base do texto atual usada ao desenhar o texto.
método:
FILLTEXT () desenha um texto preenchido na tela
STROKETEXT () desenha texto em tela (sem preenchimento)
medutorExt () retorna um objeto que contém a largura do texto especificada
Método de conversão
escala () escala o gráfico atual para maior ou menor
gire () gira o desenho atual
Tradlate () remapear a posição (0,0) da camisa floral
transform () substitui a matriz de transformação atual do desenho
setTransform () redefine a conversão atual para a matriz unitária. Em seguida, execute transform ()