A função do BeginPath é muito simples, é iniciar um novo caminho, mas é muito importante no processo de utilização do desenho em tela.
Vejamos primeiro um pequeno trecho de código:
var ctx=document.getElementById(canvas).getContext(2d); .fillStyle=amarelo; ctx.fill();
Nosso código não contém erros, mas obtemos dois quadrados amarelos com comprimento lateral de 100px, em vez de um verde e um amarelo. Por que isso acontece?
Na verdade, os métodos de desenho (fill, stoke) no canvas desenharão todos os caminhos após o último BeginPath. No código acima, o primeiro retângulo é preenchido duas vezes, a primeira vez é verde e a segunda vez é amarelo, então dois retângulos amarelos. foram obtidos da mesma forma para desenhar segmentos de linha, ou outras curvas, ou gráficos, não importa onde você moveTo, desde que você não tenha um BeginningPath, você está desenhando um caminho.
Se os gráficos que você desenhou forem inconsistentes com o que você imaginou, lembre-se de verificar o BeginPath.
Ao falar sobre BeginPath, devemos mencionar closePath. Na verdade, os dois não têm nada a ver um com o outro. ClosePath significa fechar o caminho, não terminar o caminho. , não para iniciar um novo caminho.
Adicionamos um closePath após o primeiro preenchimento do código acima e ainda obtemos dois retângulos amarelos.
Mas se adicionarmos um BeginPath posteriormente, obteremos dois retângulos de cores diferentes.
Em resumo, não tente iniciar um novo caminho fechando uma seção do caminho, e se você não fechar o caminho, mesmo que inicie um novo caminho, ele não será fechado.
Suplemento: Noções básicas sobre Beginpath e Closepath do canvasMétodo BeginPath()
var ctx = documento.ctx.movTo (100,5, 20,5) ; ;ctx.moverPara(100,5, 40,5); ctx.lineTo ( 200,5 , 40,5 ) ctx.
O 0,5 é para evitar linhas borradas. Então, que tipo de gráficos o código acima obterá? É uma linha preta e uma linha vermelha?
Do ponto de vista do código, não há problema com nossa lógica, mas o resultado é que obtemos duas linhas vermelhas, não uma preta e outra vermelha.
Se você entende por que isso acontece, não precisa ler o resto. Esta é a importância do startPath.
Os métodos de desenho na tela (como traçado, preenchimento) serão desenhados com base em todos os caminhos após o último BeginPath. Por exemplo, acariciei duas vezes no código acima. Na verdade, esses dois traços foram baseados em todos os caminhos após o primeiro BeginPath. Ou seja, traçamos o primeiro caminho duas vezes. O primeiro traço era preto e o segundo traço era vermelho, então também era vermelho no final.
1. Não importa onde você use moveTo para mover o pincel, desde que você não comece Path, você estará sempre desenhando um caminho.
2. Funções como fillRect e StrokeRect, que desenham áreas independentes diretamente, não interromperão o caminho atual.
Se os gráficos que você desenhou forem diferentes do que você imaginou, lembre-se de verificar se existe um startPath razoável.
-------
Falando em BeginPath, devemos mencionar closePath. Os dois estão intimamente relacionados? A resposta é quase nada.
closePath não significa encerrar o caminho, mas sim fechá-lo. Ele tentará conectar um caminho do final do caminho atual ao ponto inicial para fechar o caminho inteiro. No entanto, isso não significa que o caminho seguinte seja o novo caminho!
Adicionamos closePath após a primeira linhaTo no código acima e podemos descobrir que ainda temos duas linhas vermelhas.
Mas se adicionarmos BeginPath após o primeiro traço, obteremos uma linha preta e uma linha vermelha conforme esperado.
ctx.curso() ; ctx.startPath() ; ctx.movTo(100,5, 40,5) ;ctx lineTo(200,5, 40,5) ctx.
Em resumo, não tente iniciar um novo caminho fechando um caminho existente. Ao iniciar um novo caminho, o caminho anterior não será fechado.