Antes que possamos começar a desenhar, precisamos falar sobre a grade de tela ou coordenar o espaço . O modelo HTML na página anterior tinha um elemento de tela de 150 pixels de largura e 150 pixels de altura. Eu desenhei esta imagem com a grade padrão sobreposta. Normalmente, 1 unidade na grade corresponde a 1 pixel na tela. A origem desta grade está posicionada no canto superior esquerdo (coordenada (0,0)). Todos os elementos são colocados em relação a esta origem. Assim, a posição do canto superior esquerdo do quadrado azul se torna x pixels da esquerda e os pixels y a partir da parte superior (coordenada (x, y)). Mais tarde, neste tutorial, veremos como podemos traduzir a origem para uma posição diferente, girar a grade e até escalá -la. Por enquanto, seguiremos o padrão.
Antes de começarmos realmente, precisamos explorar a grade ou coordenar o espaço da tela. Há um de 150 pixels de largura e 150 pixels de altura no modelo HTML na página anterior. Sobreponho a grade padrão na tela, conforme mostrado na figura à direita. Geralmente, uma célula da grade corresponde a um pixel na tela. A origem da grade está posicionada no canto superior esquerdo (coordenadas (0,0)). As posições de todos os objetos na figura são relativas a esta origem. Dessa maneira, a posição do quadrado azul no canto superior esquerdo é o x pixel da esquerda e Y pixel do lado superior (coordenadas (x, y)). No tutorial seguinte, aprenderemos a mover a origem, girar e escalar a grade. Mas agora usaremos o estado padrão.
Ao contrário do SVG, a tela suporta apenas uma forma primitiva - retângulos. Todas as outras formas devem ser criadas combinando um ou mais caminhos. Com sorte, temos uma coleção de funções de desenho de caminho que possibilitam compor formas muito complexas.
Ao contrário do SVG, a tela suporta apenas uma forma básica - retângulo, para que outras formas sejam compostas de um ou mais caminhos. Felizmente, há um conjunto de funções de desenho de caminho que nos permitem desenhar formas bastante complexas.
Primeiro, vamos olhar para o retângulo. Existem três funções que desenham retângulos na tela:
Vamos primeiro olhar para o retângulo. Existem três funções para desenhar retângulos:
Fillrect (x, y, largura, altura): desenha um retângulo preenchido Strokerect (x, y, largura, altura): desenha um contorno retangular ClearRect (x, y, largura, altura): limpa a área especificada e a torna totalmente transparenteCada uma dessas três funções toma os mesmos parâmetros. X e Y especificam a posição na tela (em relação à origem) do canto superior esquerdo do retângulo. Largura e altura são bastante óbvias. Vamos ver essas funções em ação.
Todos eles aceitam quatro parâmetros, x e y especificam a posição do canto superior esquerdo do retângulo (em relação à origem), e a largura e a altura são a largura e a altura do retângulo. OK, vamos ter algumas batalhas práticas.
Abaixo está a função draw () da página anterior, mas agora eu adicionei as três funções acima.
A seguir, é apresentada a função Draw () no modelo na página anterior, mas as três funções acima são adicionadas.
Exemplo
function draw () {var canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2D'); ctx.FillRect (25,25,100.100); ctx.clearrect (45,45,60,60); ctx.stracerect (50,50,50,50); }}O resultado deve se parecer com a imagem à direita. A função Fillrect desenha um grande quadrado preto 100x100 pixels. A função ClearRect remove um quadrado de 60x60 pixels do centro e, finalmente, a Strokerect desenha um contorno retangular 50x50 pixels dentro do quadrado limpo. Nas páginas seguintes, veremos dois métodos alternativos para a função ClearRect e também veremos como alterar o estilo de cor e acidente vascular cerebral das formas renderizadas.
O resultado deve ser o mesmo da direita. A função Fillrect desenha um grande retângulo preto (100x100), a função ClearRect limpa o quadrado de 60x60 no meio e, em seguida, a função Strokerect descreve uma borda retângulo de 50x50 no espaço limpo. Na próxima página, veremos dois outros métodos semelhantes à função ClearRect, bem como como alterar a cor de preenchimento e borda da figura.
Ao contrário das funções do caminho que veremos na próxima seção, todas as três funções de retângulo desenham imediatamente para a tela.
Ao contrário da função do caminho na próxima seção, os efeitos dessas três funções serão refletidos imediatamente na tela.
Para fazer formas usando caminhos, precisamos de algumas etapas extras.
Ao contrário de desenhar um retângulo, desenhar um caminho requer algumas etapas extras.
BeginPath () ClosePath () AVC () preencher ()A primeira etapa para criar um caminho é chamar o método InitingPath. Internamente, os caminhos são armazenados como uma lista de sub-caminhos (linhas, arcos etc.) que juntos formam uma forma. Toda vez que esse método é chamado, a lista é redefinida e podemos começar a desenhar novas formas.
O primeiro passo é criar um caminho com o BeginPath. Na memória, os caminhos são armazenados na forma de um conjunto de subpaths (linhas, arcos etc.), que juntos formam um gráfico. Cada vez que o Time BeginPath é chamado, o Grupo Subpath é redefinido e um novo gráfico pode ser desenhado.
A segunda etapa está chamando os métodos que realmente especificam os caminhos a serem desenhados. Vamos ver isso em breve.
O segundo passo é realmente desenhar a parte do caminho, que veremos em breve.
A terceira e uma etapa opcional seria chamar o método ClosePath. Este método tenta fechar a forma desenhando uma linha reta do ponto atual para o início. Se a forma já foi fechada ou houver apenas um ponto na lista, essa função não faz nada.
A terceira etapa é chamar o método ClosePath, que tentará conectar o terminal atual ao endpoint de partida com uma linha reta para fechar o caminho, mas se o gráfico já estiver fechado ou houver apenas um ponto, ele não fará nada. Esta etapa não é necessária.
A etapa final chamará os métodos de AVC e/ou preenchimento. Chamar um deles realmente atrairá a forma para a tela. O curso é usado para desenhar uma forma descrita, enquanto o preenchimento é usado para pintar uma forma sólida.
A última etapa é chamar o método de AVC ou preenchimento e, neste momento, o gráfico é realmente desenhado na tela. O golpe é a borda que desenha a figura, o preenchimento o preencherá com uma figura sólida.
Nota: Ao chamar o método de preenchimento, qualquer formas abertas será fechada automaticamente e não é necessário usar o método ClosePath. Nota: Quando o preenchimento é chamado, o caminho aberto será fechado automaticamente sem ligar para o ClosePath.O código para uma forma simples de desenho (um triângulo) seria algo assim.
O código para desenhar uma figura simples (como um triângulo) é a seguinte.
ctx.beginpath (); ctx.moveto (75,50); ctx.lineto (100,75); ctx.lineto (100,25); ctx.fill ();
Uma função muito útil, que na verdade não desenha nada, mas faz parte da lista de caminhos descrita acima, é a função Moveto. Você provavelmente pode pensar nisso como levantar uma caneta ou lápis de um ponto em um pedaço de papel e colocá -lo no próximo.
Moveto é um método muito útil. Embora não possa ser usado para desenhar nada, faz parte de uma maneira prática de desenhar caminhos. Você pode pensar nisso como o processo de levantar a caneta e movê -la de um ponto para outro.
moveto (x, y)A função moveto leva dois argumentos - x e y, - que são as coordenadas do novo ponto de partida.
Ele aceita x e y (novas posições de coordenadas) como parâmetros.
Quando a tela é inicializada ou o método BeginPath é chamado, o ponto de partida é definido como a coordenada (0,0). Na maioria dos casos, usaríamos o método moveto para colocar o ponto de partida em outro lugar. Também poderíamos usar o método moveto para desenhar caminhos desconectados. Dê uma olhada no rosto sorridente à direita. Marquei os lugares onde usei o método moveto (as linhas vermelhas).
Quando o Canvas é inicializado ou o BELKPATH é chamado, a configuração de coordenadas inicial é a origem (0,0). Na maioria dos casos, usamos o método moveto para mover as coordenadas iniciais para outros lugares ou para desenhar caminhos descontínuos. Olhe para o rosto sorridente à direita, a linha vermelha é a trajetória de mover usando o Moveto.
Para tentar isso por si mesmo, você pode usar o trecho de código abaixo. Basta colá -lo na função de empate que vimos anteriormente.
Experimente o código a seguir e cole -o na função de desenho que você usou antes para ver o efeito.
ctx.beginpath (); ctx.arc (75,75,50,0, math.pi*2, verdadeiro); // Outer Circuitx.moveto (110,75); ctx.arc (75,75,35,0, Math.pi, falso); // bocal (sentido horário) ctx.moveto (65,65); ctx.arc (60,65,5,0, math.pi*2, verdadeiro); // deixou eyectx.moveto (95,65); ctx.arc (90,65,5,0, math.pi*2, verdadeiro); // EYECTX.STROKE DIREITO;Nota : Remova os métodos moveto para ver as linhas de conexão. NOTA : Para uma descrição da função ARC e seus parâmetros parecem abaixo. Nota: Você pode comentar o método moveto para observar as linhas conectadas. Nota: O uso do método ARC é mostrado abaixo.
Para desenhar linhas retas, usamos o método lineto.
Usamos o método Lineto para desenhar linhas retas.
lineto (x, y)Este método leva dois argumentos - x e y, que são as coordenadas do ponto final da linha. O ponto de partida depende dos caminhos desenhados anteriores, onde o ponto final do caminho anterior é o ponto de partida para o seguinte, etc. O ponto de partida também pode ser alterado usando o método moveto.
O método lineto aceita as coordenadas (x, y) do ponto final como um parâmetro. A coordenada inicial depende do caminho anterior. O ponto final do caminho anterior é o ponto de partida do caminho atual. A coordenada inicial também pode ser definida através do método moveto.
No exemplo abaixo, dois triângulos são desenhados, um preenchido e um descrito. (O resultado pode ser visto na imagem à direita). Primeiro, o método BeginPath é chamado para iniciar um novo caminho de forma. Em seguida, usamos o método moveto para mover o ponto de partida para a posição desejada. Abaixo dessas duas linhas, são desenhadas que compõem dois lados do triângulo.
O exemplo (como mostrado na figura à direita) são dois triângulos, um cheio de cor sólida e uma borda desenhada. Primeiro, chame o método BEGNPATH para criar um novo caminho, depois use o método Moveto para mover a coordenada inicial para a posição desejada e, em seguida, desenhe duas linhas retas para formar os dois lados do triângulo.
Você notará a diferença entre o triângulo preenchido e acariciado. Isso é, como mencionado acima, porque as formas são fechadas automaticamente quando um caminho é preenchido. Se tivéssemos feito isso pelo triângulo acariciado, apenas duas linhas teriam sido desenhadas, não um triângulo completo.
Você pode notar a diferença entre triângulos de preenchimento e desenho de Strok. Como mencionado acima, o caminho usando o preenchimento fechará automaticamente, mas não será com o AVC. Se o caminho não estiver fechado, apenas dois lados serão desenhados.
Exemplo
// preenche o triângulo ctx.beginpath (); ctx.moveto (25,25); ctx.lineto (105,25); ctx.lineto (25,105); ctx.fill (); // tringle Triangle ctx.beginpath (); ctx.moveto (125.125); ctx.lineto (125,45); ctx.lineto (45,125); ctx.closePath (); ctx.stroke ();
Para desenhar arcos ou círculos, usamos o método ARC. A especificação também descreve o método ARCTO, que é suportado pelo Safari, mas não foi implementado nos navegadores atuais de Gecko.
Usamos o método ARC para desenhar arcos ou círculos. O método ARCTO também está incluído na descrição padrão. Atualmente, o Safari é suportado, mas os navegadores baseados em lagartixas ainda não foram implementados.
arco (x, y, raio, startangle, endangle, no sentido anti -horário)Este método leva cinco parâmetros: x e y são as coordenadas do centro do círculo. O raio é auto -explicação. Os parâmetros Startangle e Endangle definem os pontos de partida e final do arco em radianos. O ângulo inicial e de fechamento é medido no eixo x. O parâmetro Anticockwise é um valor booleano que, quando True, desenha o ARC ANTRENTECLEWDWLEWE, caso contrário, no sentido horário.
O método aceita cinco parâmetros: x, y é a coordenada central, o raio é o raio, o startangle e o endangle são os radianos iniciais e finais (com base no eixo x como referência), é o sentido anti-horário, o que significa no sentido anti-horário e no sentido vice-vice-horário.
AVISO : No Firefox Beta, o último parâmetro é no sentido horário. A versão final apoiará a função conforme descrito acima. Todos os scripts que usam esse método em seu formulário atual precisarão ser atualizados assim que a versão final for lançada.Aviso: Na versão beta do Firefox, o último parâmetro é no sentido horário e a versão final não é. Portanto, se você estiver atualizando de beta para distribuição, precisará fazer alterações correspondentes.
Nota : Os ângulos na função do arco são medidos em radianos, não em graus. Para converter graus em radianos, você pode usar a seguinte expressão JavaScript: var radians = (math.pi/180)*graus.Nota: O ângulo usado no método do arco está em unidades de radianos, em vez de graus. A conversão direta de graus e radianos pode ser usada com esta expressão: var radianos = (math.pi/180)*graus;.
O exemplo a seguir é um pouco mais complexo do que os que vimos acima. Eu desenhei 12 arcos diferentes, todos com diferentes ângulos e preenchimentos. Se eu tivesse escrito este exemplo como o rosto sorridente acima, primeiro isso se tornaria uma lista muito longa de declarações e, em segundo lugar, ao desenhar arcos, eu precisaria conhecer todos os pontos de partida. Para arcos de 90, 180 e 270 graus, como os que usei aqui, isso não seria um problema, mas para os mais complexos, isso se torna muito difícil.
Este exemplo é mais complicado do que você já viu antes. Ele desenha 12 arcos diferentes com ângulos diferentes e estados de enchimento. Se eu desenhar esses arcos com o método acima de desenhar rostos sorridentes, seria um grande pedaço de código e, ao desenhar cada arco, preciso conhecer a posição do centro do círculo. Por exemplo, desenhar arcos de 90, 180 e 270 graus aqui também é um problema. Se os gráficos forem mais complicados, mais difícil será implementá -los.
Os dois para loops são para loop através das linhas e colunas dos arcos. Para cada arco, inicio um novo caminho usando o BeginPath. Abaixo disso, escrevi todos os parâmetros como variáveis, por isso é mais fácil ler o que está acontecendo. Normalmente, isso seria apenas uma afirmação. As coordenadas X e Y devem ser claras o suficiente. Radius e Startangle são fixos. O endangle começa de 180 graus (primeira coluna) e é aumentado com etapas de 90 graus para formar um círculo completo (última coluna). A instrução para o parâmetro no sentido horário resulta na primeira e na terceira linha sendo desenhadas como arcos no sentido horário e a segunda e quarta linha como arcos no sentido anti -horário. Finalmente, a declaração IF faz os arcos supusados pela metade superior e os arcos inferiores e preenchidos.
Aqui, usamos dois por loops para desenhar arcos com várias linhas e colunas. Cada arco cria um novo caminho usando o método BeginPath. Então, por uma questão de leitura e compreensão fáceis, escrevi todos os parâmetros em formulários variáveis. É óbvio que X e Y são as coordenadas centrais. O raio e o startangle são fixos, e o endangle começa de um semicírculo de 180 graus e incrementos no círculo no modo de 90 graus. Antilockwise depende do número de linhas ímpares e uniformes. Finalmente, a instrução IF é usada para julgar que as duas primeiras linhas são mostradas como bordas e as duas últimas linhas são preenchidas com o efeito.
for (i = 0; i <4; i ++) {for (j = 0; j <3; j ++) {ctx.beginpath (); var x = 25+j*50; // x coordenada var y = 25+i*50; // y coordenada var raio = 20; // arco raio var startangle = 0; // ponto de partida no círculo var endangle = math.pi+(math.pi*j)/2; // ponto final no círculo var anticlockwise = i%2 == 0? Falso: Verdadeiro; // no sentido horário ou no sentido anti -horário ctx.arc (x, y, raio, startangle, endangle, anti -horário); if (i> 1) {ctx.fill (); } else {ctx.stroke (); }}}O próximo tipo de caminhos disponíveis são as curvas Bézier, disponíveis na variedade cúbica e quadrática. Estes são geralmente usados para desenhar formas orgânicas complexas.
O próximo caminho a ser introduzido é a curva Bezier, que pode estar em formas quadráticas e cúbicas, e geralmente é usada para desenhar formas complexas e regulares.
quadraticcurveto (cp1x, cp1y, x, y) // quebrado no Firefox 1.5 (veja a contabilização abaixo) beziercurveto (cp1x, cp1y, cp2x, cp2y, x, y)A diferença entre estes pode ser melhor descrita usando a imagem à direita. Uma curva quadrática de Bézier tem uma partida e um ponto final (pontos azuis) e apenas um ponto de controle (pontos vermelhos), enquanto uma curva bézier cúbica usa dois pontos de controle.
Veja a figura à direita para a diferença entre as duas linhas de código acima. Todos eles têm um ponto de partida e um ponto final (ponto azul na figura), mas a curva quadrática de Bezier tem apenas um ponto de controle (vermelho)) e a curva de Bezier cúbica tem dois.
Os parâmetros X e Y em ambos os métodos são as coordenadas do ponto final. CP1X e CP1Y são as coordenadas do primeiro ponto de controle, e CP2X e CP2Y são as coordenadas do segundo ponto de controle.
Os parâmetros x e y são as coordenadas do ponto final, CP1X e CP1Y são as coordenadas do primeiro ponto de controle e CP2X e CP2Y são o segundo.
Usando curvas quadráticas e cúbicas de Bézier pode ser bastante desafiador, porque, diferentemente do software de desenho vetorial como o Adobe Illustrator, não temos feedback visual direto sobre o que estamos fazendo. Isso torna muito difícil desenhar formas complexas. No exemplo a seguir, desenharemos algumas formas orgânicas simples, mas se você tiver tempo e, acima de tudo, a paciência, formas muito mais complexas podem ser criadas.
O uso de curvas quadráticas e cúbicas de Bezier é bastante desafiador, porque não há feedback visual instantâneo, como no Software de desenho de vetores, Adobe Illustrator. Porque é mais problemático desenhar gráficos complexos. Mas se você tiver tempo e, o mais importante, poderá desenhar gráficos complexos. Vamos desenhar uma figura simples e regular abaixo.
Não há nada muito difícil nesses exemplos. Nos dois casos, vemos uma sucessão de curvas sendo desenhadas que finalmente resultam em uma forma completa.
Esses exemplos são relativamente simples. Tudo o que desenhamos são gráficos completos.
// curvas quadratrics examplex.BeginPath (); ctx.moveto (75,25); ctx.quadraticcurveto (25,25,25,62,5); ctx.quadratticcurveto (25,100,50,100); ctx.Quadratticcurveto (50, 50,50.100); 120,30.125); ctx.quadraticcurveto (60.120,65,100); ctx.quadraticcurveto (125,100.125,62,5); ctx.quadraticcurveto (125,25,75,25);
É possível converter qualquer curva bézier quadrática em uma curva bézier cúbica, calculando corretamente os pontos de controle de Bézier cúbicos do ponto de controle bézier quadrático único, embora o reverso não seja verdadeiro. Uma conversão exata de uma curva bézier cúbica em uma curva bézier quadrática só é possível se o termo cúbico for zero, mais comumente um método de subdivisão for usado para aproximar um bézier cúbico usando várias curvas quadráticas de bézier.
Através do cálculo, dois pontos de controle da curva cúbica correspondentes podem ser derivados de um único ponto de controle da curva quadrática, por isso é possível transformar quadrático em cúbico, mas de outra forma. É possível converter em uma curva quadrática de bezier apenas se o termo cúbico em uma equação cúbica for zero. Geralmente, várias curvas quadráticas podem ser usadas para aproximar a simulação de curvas de bezier cúbicas através de algoritmos de subdivisão.
// bezier curvas examplex.beginpath (); ctx.moveto (75,40); ctx.beziercurveto (75,37,70,25,50,25); ctx.beziercurveto (20,25,20,62,5,20,20,20,20.62.5); , 102,75,120); ctx.beziercurveto (110.102,130,80,130,62,5); ctx.beziercurveto (130,62,5,130,25,100,25); Ctx.beziercurvEto (85,25,25,100);
Há um bug na implementação do Firefox 1.5 do quadatriccurveto (). Ele não desenha uma curva quadrática, pois está apenas chamando a mesma função de curva cúbica BezierCurveto () chamadas e repetindo o ponto de controle quadrático único (x, y) coordenar duas vezes. Por esse motivo, o quadraticcurveto () produzirá resultados incorretos. Se você precisar do uso de quadraticcurveto (), deverá converter sua curva quadrática de Bézier em uma curva cúbica de Bézier, para que você possa usar o método Working BezierCurveto ().
No Firefox 1.5, a implementação do quadatricCurveto () é de buggy. Ele não desenha diretamente uma curva quadrática, mas chama BezierCurveto (), onde ambos os pontos de controle são o ponto de controle único da curva quadrática. Portanto, desenha curvas incorretas. Se você precisar usar o quadraticcurveto (), precisará converter a curva quadrática em uma energia cúbica sozinho, para poder usar o método beziercurveto ().
var currentx, currenty; // set to last x,y sent to lineto/moveto/beziercurveto or quadraticcurvetofixed()function quadraticcurvetofixed( cpx, cpy, x, y ) { /* for the equations below the following variable name prefixes are used: qp0 is the quadratic curve starting point (you must keep this from your last point sent to moveto(), lineto(), or beziercurveto ()). QP1 é o ponto de controle da curva quadrática (este é o CPX, CPY que você teria enviado ao quadraticcurveto ()). QP2 é o ponto final da curva quadrática (esses são os argumentos x, y que você teria enviado para quadraticcurveto ()). Conversaremos esses pontos para calcular os dois pontos de controle cúbicos necessários (os pontos de partida/final são os mesmos para as curvas quadráticas e cúbicas. As equações para os dois pontos de controle cúbicos são: cp0 = qp0 e cp3 = qp2 cp1 = qp0 + 2/3 *(qp1-qp0) cp2 = cp1 + 1/3 * y Termos para cada ponto separadamente a) Substitua as variáveis QP0X e QP0Y com CurrentX e Currenty (que * você * deve armazenar para cada Moveto/Lineto/BezierCurveto) b) Substitua as variáveis qp1x e qp1y com cpx e cpy (que teríamos passado para quadraticcurveto) C). que nos deixa com: */ var cp1x = currentX + 2.0/ 3.0 *(cpx - currentX); var cp1y = currenty + 2.0/3,0*(cpy - currenty); var cp2x = cp1x + (x - currentX) /3.0; var cp2y = cp1y + (y - currenty) /3.0; // e agora ligue para a curva cúbica de Bezier para funcionar BezierCurveto (CP1X, CP1Y, CP2X, CP2Y, X, Y); currentx = x;; currenty = y;}Além dos três métodos que vimos acima que desenham formas retangulares diretamente à tela, também temos um método recriado que adiciona um caminho retangular à lista de caminhos.
Além dos três métodos mencionados acima que podem desenhar diretamente retângulos, também temos um método RET usado para desenhar caminhos de retângulo.
ret (x, y, largura, altura)Este método leva quatro argumentos. Os parâmetros X e Y definem a coordenada do canto superior esquerdo do novo caminho retangular. Largura e altura definem a largura e a altura do retângulo.
Ele aceita quatro parâmetros, x e y são suas coordenadas superior esquerdo, e a largura e a altura são sua largura e altura.
Quando esse método é executado, o método moveto é chamado automaticamente com os parâmetros (0,0) (ou seja, redefine o ponto de partida para o seu local padrão).
Quando é chamado, o método moveto será chamado automaticamente; portanto, a coordenada inicial é restaurada à origem.
Em todos os exemplos nesta página, usei apenas um tipo de função de caminho por forma. No entanto, não há absolutamente nenhuma limitação para a quantidade ou tipo de caminhos que você pode usar para criar uma forma. Então, neste último exemplo, tentei combinar todas as funções do caminho para fazer um conjunto de personagens de jogos muito famosos.
Os exemplos usados acima usam apenas um tipo de caminho, é claro que a tela não limitará o número de tipos de caminho usados. Então, vamos olhar para um caminho de madrugada.
Não vou percorrer esse script completo, mas as coisas mais importantes a serem observadas são a função arredondada e o uso da propriedade FillStyle. Pode ser muito útil e economizar tempo definir suas próprias funções para desenhar formas mais complexas. Nesse script, isso me levaria duas vezes mais linhas de código do que agora.
Veremos a propriedade FillStyle em maior profundidade posteriormente neste tutorial. Aqui estou usando -o para alterar a cor de preenchimento do preto padrão, para o branco e o volante.
Em todo o exemplo, o mais notável é o uso da função RoundedRect e as configurações da propriedade FillStyle. As funções personalizadas são muito úteis para encapsular o desenho de gráficos complexos. O uso de uma função personalizada neste exemplo salva cerca de metade do código.
Nos exemplos a seguir, exploraremos o uso aprofundado de atributos de enchimento. Aqui está para usá -lo para alterar a cor de preenchimento, do preto padrão, para o branco e depois de volta ao preto.
Veja o exemplo
função draw () {var ctx = document.getElementById ('canvas'). getContext ('2d'); RoundEdRect (CTX, 12,12,150.150,15); RoundedRect (CTX, 19,19,150.150,9); RoundedRect (CTX, 53,53,49,33,10); RoundedRect (CTX, 53,119,49,16,6); RoundedRect (CTX, 135,53,49,33,10); RoundEdRect (CTX, 135,119,25,49,10); ctx.BeginPath (); ctx.arc (37,37,13, math.pi/7, -math.pi/7, true); ctx.lineto (31,37); ctx.fill (); for (i = 0; i <8; i ++) {ctx.fillRect (51+i*16,35,4,4); } para (i = 0; i <6; i ++) {ctx.fillRect (115,51+i*16,4,4); } para (i = 0; i <8; i ++) {ctx.fillRect (51+i*16,99,4,4); } ctx.beginpath (); ctx.moveto (83.116); ctx.lineto (83.102); ctx.bezierCurveto (83,94,89,88,97,88); ctx.bezierCurveto (105,88,111,94,111,102); ctx.lineteto (111,116); ctx.lineteto (106.333,111.333); ctx.lineteto (101.666,116); ctx.lineteto (97.111.333); ctx.lineteto (92.333,116); ctx.lineteto (87.666,111.333); ctx.lineteto (83.116); ctx.fill (); ctx.fillstyle = branco; ctx.BeginPath (); ctx.moveto (91,96); ctx.bezierCurveto (88,96,87,99,87,101); ctx.bezierCurveto (87,103,88,106,91,106); ctx.bezierCurveto (94,106,95,103,95,101); ctx.bezierCurveto (95,99,94,96,91,96); ctx.moveto (103,96); ctx.bezierCurveto (100,96,99,99,99,101); ctx.bezierCurveto (99.103.100.106,103,106); ctx.bezierCurveto (106,106,107,103,107,101); ctx.bezierCurveto (107,99,106,96,103,96); ctx.fill (); ctx.fillstyle = preto; ctx.BeginPath (); ctx.arc (101,102,2,0, math.pi*2, verdadeiro); ctx.fill (); ctx.BeginPath (); ctx.arc (89,102,2,0, math.pi*2, verdadeiro); ctx.fill (); ctx.fill (); ctx.arc (89,102,2,0, math.pi*2, verdadeiro); ctx.fill (); ctx.fill (); } função arredondada (ctx, x, y, largura, altura, raio) {ctx.beginpath (); ctx.moveto (x, y+raio); ctx.lineto (x, y+-radio de altura); ctx.quadraticcurveto (x, y+altura, x+raio, y+altura); ctx.lineto (x+largura-radius, y+altura); ctx.quadraticcurveto (x+largura, y+altura, x+largura, y+-radio de altura); ctx.lineto (x+largura, y+raio); ctx.quadraticcurveto (x+largura, y, x+largura-radius, y); ctx.lineto (x+raio, y); ctx.quadraticcurveto (x, y, x, y+raio); ctx.stroke ();}