Não pode ser desenhado diretamente no ConVAS e deve ser obtido usando esse método.
Próximo.
☆ Context.BeginPath ()Indica o início de um novo desenho de caminho.
☆ Context.ispointinpath (x, y)Determine se um ponto está no caminho. Este método não se aplica após a conversão do sistema de coordenadas.
☆ Context.moveto (x, y)É equivalente a levantar o pincel da prancheta, deixando a prancheta e depois posicionando a ponta no
Nas coordenadas (x, y), inicie um novo desenho nesta nova posição.
☆ Context.LineTo (X, Y)É equivalente à ponta da escova, não deixando a prancheta, e a ponta da escova se move da posição de coordenada atual para
Desenhe um segmento de linha nas coordenadas (x, y).
☆ Context.stroke ()Depois de se desenhar no ConVAs, algumas operações de desenho devem chamar esse método para permitir que o desenho esteja dentro
Exibição de conteúdo.
☆ Context.Save ()Esse método salva o estado atual dos Conves, independentemente de quaisquer alterações nas Conves no futuro.
Basta salvar o estado do ConVAs antes de fazer essas alterações e você pode chamá -lo mais tarde
O método context.restore () restaura o estado salvo. Geralmente desenhado em uma nova seção
ou o estado original do ConVAS deve ser salvo antes de modificar a operação (nenhum desenho ou alteração é feito
), restaure -o ao seu estado original após a conclusão de uma nova operação de sorteio ou modificar. esse
Também é propício para futuras operações de desenho.
De fato, o contexto do ambiente de desenho 2D da tela tem muitas propriedades e alguns métodos com
Estado relacionado, o valor de cada atributo é alterado (ou algum método é usado para alterar o estado de desenho),
O estado de desenho muda. Se salvo após cada alteração, vários estados de uma propriedade irão
Salve -o na forma de uma pilha, e a parte RESTORE () pode ser chamada várias vezes na ordem da pilha.
retornar ao estado salvo correspondente.
☆ Context.Translate (X, Y)Este método move a origem coordenada atual para (x, y).
☆ Context.restore ()Restaure o estado de Convers ao último estado salvo.
☆ Context.ClosePath ()Este comando é muito semelhante em comportamento ao lineto
função, com a diferença é que o destino é
assumido automaticamente como o
origem do caminho. No entanto, o caminho de perto também informa
a tela que a forma atual fechou ou formou um
área completamente contida. Isso será útil para o futuro
preenche e golpes.
Neste ponto, você está livre para continuar com mais
segmentos em seu caminho para criar subspates adicionais. Ou você
pode começar a qualquer momento para começar de novo e limpar o caminho
listar completamente.
☆ Context.Fill ();Preencha o caminho fechado depois de definir o estilo de preenchimento. Não há necessidade de chamar esse método depois de chamá -lo
Método context.stroke ().
☆ Context.FillRect (x, y, largura, altura)Desenhe e encha a área retangular com largura e comprimento (largura, altura) em (x, y). Ajustar
Depois de usar esse método, você não precisa chamar o método context.stroke () novamente.
☆ Context.Strokerect (x, y, largura, altura)Desenhe um contorno retangular com largura e comprimento (largura, altura) em (x, y).
☆ Context.clearrect (x, y, largura, altura)A posição de limpeza (o canto superior esquerdo do retângulo) está em (x, y), e o tamanho é (largura, altura)
área retangular.
Remova qualquer conteúdo da área retangular e redefini -lo
para sua cor original e transparente.
A capacidade de limpar os retângulos na tela é essencial para
Criando animações e jogos usando a API de tela HTML5. Por
desenhando e limpando repetidamente seções da tela, isso
é possível apresentar a ilusão de animação, e muitos
Exemplos disso já existem na web. No entanto, para
Crie animações com desempenho sem problemas, você precisará
Utilize recursos de recorte e talvez até um secundário
tela tamponada para minimizar o tremor causado por
frequentemente a tela limpa.
☆ Context.Drawimage ()Este método possui três sobrecargas para desenhar a imagem na tela. A fonte de imagem pode ser
Um quadro da tag IMG na página, o objeto de imagem em JS e Video.
• Context.Drawimage (img, x, y)
Desenhe a imagem com a imagem IMG em (x, y). Quando o tamanho da tela é maior que a imagem
, toda a imagem é desenhada; Quando a imagem é maior que a tela, o excesso é cortado.
• context.drawimage (img, x, y, w, h)
Em (x, y), use a imagem IMG para desenhar uma área retangular com comprimento e largura (W, H). imagem
O tamanho da seqüencial mudará para (w, h).
• context.drawimage (img, imgx, imgy, imgw, imgh, cx, cy,
CW, CH)
Tome uma imagem img como um objeto de desenho, e a posição no img é (imgx, imgy
) A área com tamanho (imgw, imgh) é desenhada na posição de tela (cx, cy)
Desenhe a área de tamanho (CW, CH).
Uma exceção é lançada se a área da colheita na imagem estiver fora da faixa de imagem.
• Context.Drawimage (vídeo, VX, VY, VW, VH, CX, CY, CW, CH)
Pegue um objeto de vídeo como um objeto de desenho e pegue a posição no vídeo como (vx, vy
) Uma estrutura com tamanho (VW, VH), se baseia na posição na tela (cx, cy)
Áreas com pequeno (CW, CH).
Além disso, o primeiro parâmetro de drawImage () também pode ser outra tela.
☆ context.getImagedata (x, y, largura, altura)Este método obtém o tamanho (largura, altura) da posição dentro da tela (x, y)
Uma área de pixels, o valor de retorno é um objeto de imagem. Imagemata tem largura,
altura e dados.
O atributo de dados é uma matriz de pixels, e cada quatro elementos consecutivos na matriz representam uma imagem
, quatro elementos consecutivos contêm informações de cor e transparência RGBA, por sua vez. Quatro elementos consecutivos
O pixel deve pertencer a um pixel, e a posição do primeiro elemento não é tomada à vontade.
A matriz Pixel é especificada na ordem de tela de cima para baixo e da esquerda para a direita.
Digitalize para obter. O número de elementos na matriz de pixels é largura * altura * 4. Para obter um específico
Informações de pixel da localização.
Se você abrir a página da web usando este método em um modo de arquivo local, não será normal
Trabalhando, geralmente ocorrem erros de segurança. Você pode fazer upload de arquivos para
O servidor da Web solicita que o acesso para resolver esse problema. E as imagens envolvidas, JS e
O HTML deve ser do mesmo nome de domínio. No entanto, o IE9 pode ser acessado através de arquivos locais.
Um exemplo é o seguinte:
Copie o código