Notas de estudo do Canvas: desenhando caminhos simples

Etapas gerais para desenhar segmentos de linha:

moveTo(x,y) move o pincel para o ponto de coordenada especificado (x,y)

lineTo(x,y) usa uma linha reta para conectar o ponto final atual e o ponto de coordenada especificado (x,y)

acidente vascular cerebral() desenha o caminho atual ou existente de acordo com o estilo de desenho de linha atual

Passos gerais para desenhar um caminho retangular:

rect(x, y, largura, altura) caminho retangular, ponto coordenado (x, y), largura altura largura e altura

acidente vascular cerebral() ou preenchimento desenha ou preenche o caminho de acordo com o estilo atual

Você também pode usar o strokeRect ou fillRect mencionado acima ou emendá-lo em um retângulo por meio de lineTo.

Vejamos primeiro a API para desenhar arcos:

ctx.arc(x, y, raio, startAngle, endAngle, sentido anti-horário);

x, y centro do arco, raio raio do arco, ponto inicial startAngle, ponto final do arco endAngle, sentido anti-horário padrão para sentido horário, verdadeiro sentido anti-horário

Todas as rotações em CSS usam ângulos (deg), mas a unidade usada para expressar ângulos na função arco é radianos, não ângulos. Expressões JS de ângulos e radianos: radianos = (Math.PI/180) * ângulo (graus).

O radiano aqui é calculado com base na direção positiva do eixo x e no ângulo de rotação no sentido horário por padrão.

Ilustração:

(foto do deserto)

 ctx.beginPath();ctx.arc(200, 100, 100, 0, Math.PI / 2, false);ctx.closePath();ctx.stroke();ctx.fill();

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.