Path2D

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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()

Path2D construtor. Cria um novo objeto Path2D.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Path2D
Path2D() constructor
addPath
arc
arcTo
bezierCurveTo
closePath
ellipse
lineTo
moveTo
quadraticCurveTo
rect
roundRect

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Veja também