Início / coding / Perguntas / 79593049
Accepted
Kadir
Asked: 2025-04-26 01:38:55 +0800 CST

Ao usar ctx.moveTo() com a tag HTML Canvas ctx.arc(), moveTo() desenha uma linha

  • 772

Com o objetivo de me aprimorar e porque estava entediado, estava aprendendo as tags do Canvas em HTML seguindo a documentação do Mozilla e desenhamos um rosto lá. Tentei fazer o rosto como o Mozilla sugeriu, mas linhas apareceram no meu rosto devido aos valores e não sei por quê.

const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.arc(75, 75, 60, 0, Math.PI * 2, true)
ctx.moveTo(40, 40)
ctx.arc(50, 50, 10, 0, Math.PI * 2, true)
ctx.moveTo(60, 50)
ctx.arc(100, 50, 10, 0, Math.PI * 2, true)
ctx.moveTo(110, 110)
ctx.arc(80, 110, 30, 0, Math.PI, true)
ctx.stroke()
<canvas class="canvas" width="150" height="150"></canvas>

Rosto esperado:

captura de tela do rosto esperado

Resultado face:

resultado cara

Como você pode ver, estou falando de linhas indesejadas no rosto.

Tudo o que sei e descobri é que, por algum motivo, o xvalor de moveTodeveria ser igual ao raio do círculo e os yvalores deveriam ser os mesmos — mas não sei por quê. Queria perguntar por que isso acontece.

Resumindo, não descobri o porquê, mas por algum motivo, quando brinco com os valores ou quando torno os valores incompatíveis, aparece uma linha.

javascript

2 respostas

  1. Best Answer
    • beginPath()inicia um novo caminho.
    • arc()adiciona um segmento de círculo ao caminho.
    • moveTo()inicia um novo segmento naquele local e o caminho continua a partir daí.
    • arc()adiciona ao segmento do caminho começando do moveTo()local até o início do círculo e depois ao redor do círculo.
    • ...
    • stroke() desenha todos os segmentos de caminho que foram definidos desde obeginPath()

    Para desenhar o rosto, você precisa remover as moveTo()chamadas e envolvê-las arc()em uma chamada beginPath()and stroke(). Veja este primeiro trecho.

    const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d")

ctx.beginPath()
ctx.arc(75, 75, 60, 0, Math.PI * 2, true)
ctx.stroke()

ctx.beginPath()
ctx.arc(50, 50, 10, 0, Math.PI * 2, true)
ctx.stroke()

ctx.beginPath()
ctx.arc(100, 50, 10, 0, Math.PI * 2, true)
ctx.stroke()

ctx.beginPath()
// EDIT Change x and y slightly
ctx.arc(75, 90, 30, 0, Math.PI, false)
ctx.stroke()
    canvas {
  box-shadow: 2px 2px 5px salmon;
}
    <canvas class="canvas" width="300" height="180"></canvas>

    Neste segundo trecho, você encontra seu código com as coordenadas moveTo() circuladas em vermelho. Você pode ver que as linhas são desenhadas a partir das coordenadas moveTo() até o início do segmento do caminho do arco.

    const canvas = document.querySelector(".canvas");
const ctx    = canvas.getContext("2d");

ctx.beginPath()
ctx.arc(75, 75, 60, 0, Math.PI * 2, true)
ctx.moveTo(40, 40)
ctx.arc(50, 50, 10, 0, Math.PI * 2, true)
ctx.moveTo(60, 50)
ctx.arc(100, 50, 10, 0, Math.PI * 2, true)
ctx.moveTo(110, 110)
ctx.arc(80, 110, 30, 0, Math.PI, true)
ctx.stroke()

// Draw a dot at all of the moveTo() coordinates
dot(40, 40);
dot(60, 50);
dot(110, 110);


function dot(x, y) {
  ctx.strokeStyle = "red"
  ctx.beginPath();
  ctx.arc(x, y, 4, 0, Math.PI * 2)
  ctx.stroke();
}
    <canvas class="canvas" width="300" height="180"></canvas>

    Neste terceiro trecho, as coordenadas originais do Mozilla são usadas com as coordenadas moveTo() circuladas em vermelho. Você não vê nenhuma linha reta porque as "linhas" têm comprimento 0, já que as coordenadas moveTo() são as mesmas do local onde o arco inicia seu segmento de caminho.

    const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); // Mouth (clockwise)
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Left eye
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Right eye
ctx.stroke();

// Draw a dot at all of the moveTo() coordinates
dot(110, 75);
dot(65, 65);
dot(95, 65);

function dot(x, y) {
  ctx.strokeStyle = "red"
  ctx.beginPath();
  ctx.arc(x, y, 4, 0, Math.PI * 2)
  ctx.stroke();
}
    <canvas class="canvas" width="300" height="180"></canvas>

    • 2

  2. Em primeiro lugar, obrigado por tentar responder para mim , eu não entendia esse problema um pouco, na verdade, eu queria entender um pouco mais solidamente com base na resposta que você escreveu no início, e eu fui para a parte matemática do trabalho, fiz cálculos e descobri por que a linha foi formada, o evento está na verdade em uma tela quadrada com um tamanho de150x150 pixels , Quando desenhamos um círculo com um raio de 60 pixels , quando movemos para X = 70, Y = 50 com base no ponto central do círculo , se o ponto inicial do comando moveTo para o círculo recém-criado com um raio de 10 pixels não estiver definido corretamente , ocorre uma diferença de distância de 10 pixels em relação à (50, 50)coordenada central. Isso cria uma linha indesejada de 10 pixels entre os pontos inicial e final na tela. O motivo para isso é que a posição inicial do desenho do novo círculo não é calculada considerando o tamanho do raio . Então, na verdade, nosso moveTométodoX = X axis value of the circle + radius of the circle é sério, muito obrigado

    • 0

relate perguntas