Este artigo falará sobre o método de desenhar retângulos e círculos na tela, eles pertencem a gráficos básicos. Obviamente, existem mais do que apenas eles nos gráficos básicos, mas na tela, apenas desenhar retângulos e círculos não requer outras simulações.
Canvas desenham retângulos 1. Filsect e StrokerectO Fillrect pode preencher diretamente um retângulo, e o estilo de enchimento é o estilo que você está configurando atualmente; Da mesma forma, a Strokerect é acariciar diretamente um retângulo
Seus parâmetros são consistentes, por sua vez (coordenadas do ponto de partida X, ponto de partida y, largura do retângulo, altura do retângulo). O ponto de partida aqui, observe, refere -se ao ponto no canto superior esquerdo do retângulo.
Geralmente os usamos para fazer coisas simples, e elas só podem fazer coisas simples. Por que? Porque as palavras que os gráficos desenham não têm caminhos, eles saíram diretamente.
Por exemplo, se você preencher um retângulo primeiro com o Fillrect, você deseja acariciar o retângulo. Se você usar Stroke (), não haverá efeito, porque, embora exista um retângulo neste momento, não há caminho.
Se você estiver ansioso para acariciar esse retângulo, poderá usar o STROKERECT () para acariciar um retângulo na mesma posição - mas eles são realmente independentes, apenas posições sobrepostas.
ctx.fillrect (200,100,50,40);
CTX.Strokerect (200,100,50,40);
Se quisermos um retângulo preenchido e acariciado, sem dúvida será complicado usar o Fillrect e o Strokerect ao mesmo tempo. Portanto, neste caso, geralmente usamos o seguinte método.
2, Rect Os parâmetros de Rect não são diferentes do Fillrect e da Strokerect. A diferença é que eles apenas desenham o caminho e você precisa completar o golpe ou se encher mais tarde.ctx.rect (300,100,50,40);
ctx.stroke ()
ctx.fill ();
Quais são os benefícios de fazer isso? No artigo anterior, mencionei que o preenchimento ou derrame consome muitos recursos, então geralmente (como loops) precisamos desenhar centenas de caminhos de uma só vez e depois acariciar ou preencher. Neste momento, use Rect para desenhar o caminho e encher novamente, o que evita o problema de preencher e preencher ou acariciar o StrokeC.
3. LinetoObviamente, você também pode usar 4 linesto, desenhe um retângulo como o meu tutorial sobre linhas de desenho. Mas isso é desnecessário, confira esse artigo para obter detalhes.
Canvas desenham círculo O céu não tem olhos. De fato, o Canvas não possui uma função real que pode desenhar diretamente um círculo. O que ele desenha é na verdade um arco de 360 graus, que parece um círculo.Já mencionamos a função da tela desenhando um arco antes, ou seja, arco. Nós o usamos para desenhar um círculo:
ctx.arc (300+25.100+20,20,0, math.pi*2);
ctx.stroke ()
ctx.fill ();
Esse arco é o mesmo que Rect, e o caminho é desenhado, e o recheio ou o golpe precisa ser concluído posteriormente.
Mas deve -se notar que o julgamento da posição de um círculo é diferente do de um retângulo. Determinamos sua posição com o canto superior esquerdo do retângulo como o ponto de partida, mas geralmente determinamos a posição do círculo com o centro do círculo.
Se você deseja desenhar um conjunto de retângulos e círculos que são centralizados horizontal e verticalmente, lembre -se de não considerar o ponto de partida do retângulo como o ponto de partida do círculo - o ponto de partida do círculo é o centro do círculo!
Esqueça, é melhor eu lhe dar uma fórmula agora, círculos e retângulos alinhados, coordenadas do centro do círculo = coordenadas dos retângulos + metade da largura e altura dos retângulos.
Ou seja, o centro do círculo x = retângulo x + largura do retângulo/2 e o círculo y = retângulo y + altura do retângulo/2. Dessa maneira, eles estão absolutamente alinhados.
Embora o ARC não seja tão fácil de usar quanto um método de desenhar diretamente círculos - o método de desenhar diretamente círculos que eu imaginei requer apenas 3 parâmetros, a saber, as coordenadas centrais do círculo, ou seja, o raio - mas o arco não pode apenas desenhar círculos, mas também desenhar semicircles, por isso é mais poderoso e pode ser usado.
Como existe um círculo, deve haver uma elipse, mas não há nem uma função regular para desenhar um círculo na tela, muito menos em uma elipse. Portanto, as elipses de desenho devem ser simuladas usando outros métodos. Isso é bastante complicado, então deixarei para o próximo passo.