Path2D
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since agosto de 2016.
Experimental: Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.
A Path2D interface da API Canvas 2D é usada para declarar caminhos que são usados posteriormente em objetos CanvasRenderingContext2D. Os métodos de caminho da interface CanvasRenderingContext2D também estão presentes nessa interface e permitem criar caminhos que você pode reter e reproduzir conforme necessário em uma tela.
Construtores
Path2D()-
Path2Dconstrutor. Cria um novo objetoPath2D.
Metodos
Path2D.addPath()-
Adiciona um caminho ao caminho atual.
Path2D.closePath()-
Faz com que o ponto da caneta retorne ao início do sub-caminho atual. Ele tenta desenhar uma linha reta desde o ponto atual até o início. Se a forma já foi fechada ou tem apenas um ponto, essa função não faz nada.
Path2D.moveTo()-
Move o ponto inicial de um novo subcaminho para as coordenadas (x, y).
Path2D.lineTo()-
Conecta o último ponto no subcaminho às coordenadas x, y com uma linha reta.
Path2D.bezierCurveTo()-
Adiciona uma curva cúbica de Bézier ao caminho. Requer três pontos. Os dois primeiros pontos são pontos de controle e o terceiro é o ponto final. O ponto de partida é o último ponto no caminho atual, que pode ser alterado usando moveTo () antes de criar a curva Bézier.
Path2D.quadraticCurveTo()-
Adiciona uma curva quadrática de Bézier ao caminho atual.
Path2D.arc()-
Adiciona um arco ao caminho que é centralizado na posição (x, y) com raio r iniciando em startAngle e terminando em endAngle indo na direção dada no sentido anti-horário (padrão no sentido horário).
Path2D.arcTo()-
Adiciona um arco ao caminho com os pontos de controle e raio dados, conectados ao ponto anterior por uma linha reta.
Path2D.ellipse()-
Adiciona uma elipse ao caminho que é centralizado na posição (x, y) com os raios radiusX e radiusY começando em startAngle e terminando em endAngle indo na direção determinada no sentido anti-horário (padrão no sentido horário).
Path2D.rect()-
Cria um caminho para um retângulo na posição (x, y) com um tamanho determinado por width e height.
Especificações
| Specification |
|---|
| HTML # path2d-objects |
Compatibilidade com navegadores
Loading…