Desperte sua criatividade com o Canvas de HTML5

1. Olá!: Bem-vindo ao curso HTML5 Canvas, onde você vai de iniciante a ser criador totalmente confiante em gráficos e animações usando o Canvas. Meu nome é Chris, e estou aqui para guiá-lo neste processo passo a passo. Tenho muitos anos de experiência no desenvolvimento de sites e também na criação cursos online com milhares de alunos e centenas de avaliações de cinco estrelas. Este curso foi projetado para um iniciante para ensiná-lo tudo sobre como desenhar para o Canvas usando JavaScript. No final deste curso, você terá a confiança e a capacidade de desenhar ou animar quase tudo o que possa imaginar, e exibi-lo em páginas web, ou em um navegador da web. Levaria você passo a passo do básico do Canvas até técnicas mais avançadas, como transformações, animações, salvamento e instalação, e também como manipular dados de pixel em imagens. Começamos por configurar o Canvas e apresentá-lo ao script básico em técnicas de desenho. Vamos dar uma olhada em linhas e sopros e como desenhar um muito formas. Vou mostrar-lhe como adicionar texto e imagens à tela, remover seções da tela juntamente com a adição alguns efeitos agradáveis, como gradientes, padrões e sombras. À medida que você progride no curso, vamos intensificar as coisas ainda mais olhando para técnicas mais avançadas, vamos analisar vários tipos de curvas, salvar e restaurar métodos e como usar transformações. Você também aprenderá como usar loops, animações e até mesmo como modificar os dados de pixel das imagens para nos permitir adicionar efeitos como fazer fotos em preto e branco. Terminamos deixando você com um desafio, vamos desenhar o rosto do Mickey Mouse. Vamos colocar suas novas habilidades em prática. O aluno ideal deste curso é alguém com alguma experiência em web design ou desenvolvimento, e procurando aprender uma nova forma de habilidade. Learning Canvas também é ideal para qualquer pessoa que queira construir jogos baseados em navegador. Uma pequena experiência de conceitos básicos de JavaScript seria um benefício à medida que você percorre este curso. No entanto, não há outros requisitos, tomando este curso, apenas necessidade de aprender. Sinta-se livre para dar uma olhada na descrição do curso e também na tela da palestra para descobrir tudo o que você aprenderá com este curso. Aperte o botão Fazer este curso, e estou ansioso para vê-lo dentro do curso. 2. O que é o Canvas de HTML5?: Ok pessoal. Primeiro de tudo, antes de começar a desenhar qualquer coisa no Canvas, eu só quero tomar um ou dois momentos apenas para dar uma olhada rápida no que podemos fazer com HTML5 Canvas e o que exatamente é o Canvas. Então, basicamente, o Canvas é um elemento HTML. Assim como muitas das tags HTML, como tags de parágrafo, temos uma abertura e um fechamento elementos. Então, ao contrário da tag de imagem, por exemplo, não é uma tag de fechamento automático. Então não precisamos da tag de abertura, e depois da tag de fechamento com a barra. É uma área retangular de uma página web que podemos usar para desenhar. Para nos permitir desenhar, usamos uma linguagem de script, que geralmente é JavaScript, mas linguagens de script podem ser usadas. Mas para o restante deste curso, usaremos JavaScript como é a linguagem mais popular usada com o Canvas. Se você precisar de ajuda com tutoriais ou referências on-line, praticamente todos eles são baseados em JavaScript e, finalmente, o Canvas foi adicionado em HTML5. Portanto, é muito novo, mas é muito bem apoiado. Agora vamos dar uma olhada em uma ou duas coisas que podemos fazer com o Canvas. Então, como mencionamos antes, podemos usar o Canvas para desenhar. Podemos desenhar coisas como retângulos, círculos, linhas retas e arcos, e muitos dos diferentes tipos de gráficos que vamos entrar à medida que avançamos no curso. Podemos até desenhar texto para o Canvas. Podemos adicionar algum texto simples ou podemos em várias fontes diferentes, cores diferentes. Podemos adicionar gradientes e até mesmo animar esse texto. O Canvas também pode ser usado para adicionar imagens e suas diferentes técnicas de manipulação de imagens, que vamos olhar à medida que avançamos no curso. Nós também vamos dar um olhar para fora várias animações em várias transformações enquanto percorremos o curso. Há muitos fatos legais que você pode adicionar, como rotações e você pode aplicar algumas dessas animações para realmente criar jogos. Um monte de jogos não é realmente coberto neste curso. Muitas das técnicas que vamos usar podem então ser aplicadas aos jogos se isso é algo que você quer progredir. Finalmente, também podemos padrões, gradientes e sombras para os gráficos e o texto para fazer isso parecer realmente bom. Então eu mencionei antes que o Canvas tem uma abertura e uma tag de fechamento, e também que o Canvas é muito bem visto agora. Mas apenas equipar a nós mesmos para navegadores suportados. Entre essas duas tags, podemos adicionar algum texto simples. Basta informar o usuário que o Canvas não é suportado em seu navegador e talvez uma mensagem apenas para pedir que ele atualize para um navegador mais novo. Então, podemos usar isso como uma queda de fallback em navegadores suportados. Novamente, como muitos elementos sobre HTML, também podemos adicionar atributos para a tag de abertura Canvas. Muitos deles parecerão muito familiares se você tiver feito um pouco de HTML no passado. Este exemplo tem um ID, que vamos usar ao longo deste curso para direcionar o Canvas. Este exemplo tem uma largura e o atributo height para definir o tamanho da Tela que você deseja usar, e também podemos adicionar um atributo de estilo, adicionar coisas como cores de fundo e bordas. Vamos ver o que o HTML5 Canvas é, algumas coisas que podemos usá-lo para. Então agora vamos passar para o próximo vídeo. Na verdade, vou começar a configurar o Canvas. 3. Noções básicas do Canvas: configurando sua tela: Eu quero começar neste vídeo fazendo alguma configuração básica do Canvas. Eu vou trabalhar para este vídeo e para o restante deste curso em CodePen, que está disponível em codepen.io. Como você pode ver, CodePen é um playground para a web front-end. Basicamente, o que podemos fazer usando o CodePen, é que podemos ter um editor de texto online, onde podemos usar nosso código. Também ao lado de uma tela dividida, também podemos ter uma janela do navegador que exibe os resultados do nosso código. Faremos isso no que é chamado de Caneta. Uma caneta é apenas sua própria área autônoma, como podemos criar um site usando uma caneta. Eu também vou usar Canetas para cada seção deste curso, apenas para que todas as diferentes áreas estejam contidas e você possa usá-las para referência futura. Claro, se você não quiser usar o CodePen, você pode usar um editor de texto baseado em desktop e também um navegador da Web, então sinta-se à vontade para fazer essa rota se preferir. Mas para o restante deste curso, eu vou usar CodePen. Se o CodePen for algo que você não usou antes, clique no botão “Cadastre-se” no canto superior direito e siga o processo de inscrição simples para criar uma conta. CodePen vem com um custo mensal se você quiser usar uma das contas profissionais. No entanto, tudo o que você precisa para o restante deste curso é se inscrever para um dos planos gratuitos. Vá em frente e clique em Inscrever-se para eles. Você deve pressionar o botão “Login”. Eu só vou entrar na minha conta e, portanto, começar com configurar o Canvas. Vou clicar em “Nova Caneta”. Quando você começar, esta será a tela que você verá. Você pode ter um layout ligeiramente diferente. A seta branca que você pode ver no lado direito, vai ser a área onde podemos ver os resultados do nosso código. Efetivamente, vai ser o navegador da web. Eu tenho uma seção HTML, uma seção CSS e uma seção JavaScript. Para este vídeo, eu só vou estar concentrando na seção HTML. Eu só vou reorganizar isso só para ter um pouco mais de espaço lá dentro. Então eu vou apenas clicar na Caneta e depois chamá-la de “Configurando a Tela”. Então vou guardar isso para começar. A primeira coisa que eu quero fazer na seção HTML é criar um esqueleto HTML básico. Isso é bom e fácil de fazer no CodePen. Se você digitar htlm:5. Podemos usar os comandos ML e a guia Hit, em seguida, que cria uma inferência de escala HTML5 para começar. Eu colocaria direto para o título dos documentos. Vou chamar-lhe o mesmo, “Setting up the Canvas”. Agora, estamos prontos para entrar na seção do corpo. Sabemos desde o último vídeo, que o HTML5 Canvas tem as tags Canvas. Temos a tag de abertura Canvas, e também temos a tag de fechamento com a barra. Comece com esses dois e, em seguida, vamos adicionar alguns atributos dentro da tag Open-end Canvas. Sabemos que podemos desenhar gráficos com o Canvas usando scripts. Vou mencionar que vamos usar JavaScript para o resto do curso. Vamos vincular o script ao Canvas referindo-se ao ID do Canvas, que agora você definirá como atributo. Dê um ID ao Canvas e você chamá-lo do que quiser, mas eu vou simplesmente chamá-lo de “myCanvas”. Se salvarmos isso, notaremos no lado direito, que na verdade não há nenhuma tela desenhada na tela. Isso ocorre porque as tags Canvas como elas são, na verdade, não desenham nada por padrão. Só para que possamos ver por baixo do título, eu só vou adicionar um pouco de estilo lá. Isso é apenas estilos CSS padrão. Só vou adicionar uma cor ao fundo. Vamos começar por tag na tela e, em seguida, adicionar um plano de fundo. Vou fazer o meu vermelho. Lá vamos nós. Essa é a tela que aparece na tela. Podemos ver que há um retângulo vermelho aparecer. Isso ocorre porque, por padrão, a largura da Tela é de 300 pixels de largura com um padrão de 150 pixels de altura. Claro, não podemos mudar isso nos atributos. Podemos adicionar uma largura de 300 pixels e também adicionar uma altura de 300 pixels. Agora, você pode ver que temos um bom Canvas quadrado para começar, então, finalmente , para navegadores não suportados, vamos adicionar o texto alternativo que vimos no último vídeo. Vamos começar com a mensagem do seu navegador, ele não suporta o HTML5 Canvas. Considere atualizar ou alterar seu navegador para uma experiência melhor. Simplesmente assim. Você pode ver se nós salvamos a Caneta no texto, que apenas irá colocar lá dentro, ele realmente não aparece na Tela do lado direito. Isso ocorre porque nosso ambiente de demonstração localiza totalmente o Canvas, mas é claro, é uma boa prática deixar isso lá para pessoas que não têm um navegador atualizado. Agora, nós temos o básico de como configurar o Canvas, agora, vamos passar para o próximo vídeo, vamos fazer alguns desenhos. 4. Noções básicas do Canvas: criando scripts e desenhando retângulos: Agora temos a configuração básica da tela na tela. Agora vamos passar para adicionar alguns scripts e, na verdade, desenhar alguns retângulos na tela. A primeira coisa que queremos fazer é dizer que há uma pequena mensagem de erro na parte inferior. Eu vou começar primeiro clicando sobre isso. Você pode ver que a CodePen não precisa de uma declaração doctype, então eu vou apenas excluir isso, apenas para me livrar dessa mensagem, em seguida, salvar. Claro, certifique-se de que isso é deixado dentro se você estiver usando em um editor de texto em um navegador da Web separado ou, de fato, se você estiver implantando na Web, certifique-se de que ele é mantido lá dentro. Para este vídeo, eu vou criar uma nova caneta, e nós podemos criar uma nova caneta da mesma forma que o último vídeo, ou nós podemos realmente apenas clicar no garfo um. Isso criará duplicatas. Podemos então renomear essas duplicatas, e isso nos salvará digitando todo o esqueleto HTML uma e outra vez. Vou chamar isso de retângulos de script e desenho, adicionar o mesmo no título e criar um pouco mais de espaço lá. A primeira coisa que precisamos fazer para acessar o script é criar as tags de script. Então, basta explodir a tela, eu vou para a administração, logo ali. Então abra as tags de script, e então precisamos de uma tag de fechamento, e é como usar JavaScripts padrão. Usamos JavaScript no passado, muitas das coisas que vamos fazer neste curso parecerão bastante familiares. Se não, não se preocupe, você deve ser capaz de acompanhar muito bem. Vamos começar pegando a tela pela identificação. Vou guardá-lo dentro de uma variável chamada canvas. Então, crie a variável com o nome da tela, e eu vou pegar o ID da minha tela selecionando o document.getElementById. Apenas certifique-se de que os elementos, por, e ID têm um par a menos. O elemento que vamos pegar é a minha tela. Então, entre colchetes, em seguida, dentro das cotações digite myCanvas, em seguida, vamos acabar com um ponto-e-vírgula. Esta seção está pegando a tela pelo ID e armazenando dentro de uma variável chamada canvas. Vou criar mais uma variável chamada ctx, esta é a abreviação de contexto. Isso ocorre porque nós vamos estar acessando o contexto de renderização da tela, e isso nos permite realmente desenhar para a tela. Fazemos isso chamando o método de telas GetContext. Dentro desta variável, vamos selecionar a tela, que é criada, e então ponto, e, em seguida, chamar getContext, seguido dos colchetes, e um ponto-e-vírgula. Neste curso estaremos nos concentrando em gráficos 2D. Então, dentro dos colchetes como um parâmetro, vamos adicionar 2D dentro de lá, e isso especificará que queremos criar um contexto de renderização bidimensional. Vou usar uma variável ctx muito ao longo do curso. Agora que temos o contexto ou a variável ctx, agora podemos usar isso para acessar as propriedades de desenho, usando-o. Vou excluir as propriedades de estilo para adicioná-lo no último vídeo, e vou adicioná-las em vários scripts. Pegue a variável ctx, e então vamos usar o método fillStyle com um S maiúsculo, e o estilo vai ser a cor que queremos definir. Esta é uma cor CSS, então eu quero chamá-la de vermelho. Podemos usar o nome da cor, ou podemos usar o valor x, ou você pode até usar gradientes, ou trocadilhos, que veremos mais tarde no curso. Vamos realmente usar essa cor, e preencher retângulo. Novamente, precisamos usar o ponto de contexto, e desta vez FillRect, que é, naturalmente, um retângulo. Agora, dentro dos colchetes do método FullRect, vamos adicionar em quatro parâmetros diferentes. Eu só vou adicionar 0, 0, 300, 300. Os dois primeiros parâmetros, o zero e o zero, é a posição em que gostaríamos de iniciar o retângulo na tela. Portanto, 0 x e 0 y, os dois primeiros valores, é o canto superior esquerdo da tela. Vamos olhar mais para as coordenadas no próximo vídeo, mas por enquanto, nós só precisamos saber que a posição 0, 0, é uma coordenada para o canto superior esquerdo, e então você provavelmente já adivinhou que os 300, 300, a largura e a altura do retângulo. Criamos um retângulo do mesmo tamanho da tela, e em vez de coordenadas rígidas com um valor específico, também podemos usar JavaScript para fazer com que correspondam à mesma largura e à mesma altura que a tela. Nós mudamos isso para ser tela, e esta é a tela.largura, e fazemos o mesmo com alturas. Então lonvas.height, e então devemos obter o retângulo parecer exatamente como era antes. Agora vou criar mais um ou dois retângulos ou quadrados só para brincar. Vamos pegar o contexto, e novamente, pegar o método fillStyle. Eu quero definir este tempo para ser um valor hexágono, então use a hashtag, e eu vou usar 00ff99. Este estilo não faz nada até que realmente criemos um retângulo. Então CTX.fillRect. Assim como antes, começaremos no canto superior esquerdo. Então 0, 0, e desta vez queremos torná-lo metade da largura, e metade da altura da tela. Usando JavaScript, podemos fazer isso novamente. Em vez de tela, a largura que obtivemos no último exemplo, vamos usar lona. Largura sobre dois, e então o mesmo para as alturas, tela.altura sobre dois, ou dividido por dois. Isso deve fazer um belo quadrado aqui no canto superior esquerdo, que é metade do peso e metade da altura da tela original. Vamos adicionar mais um, apenas em uma posição ligeiramente diferente. Vamos preencher o estilo novamente, desta vez com uma cor diferente. Vou escolher cc99ff e, em seguida, preencher retângulo. Desta vez, queremos configurá-lo para ser um 150 pixels, e esta é a posição inicial no centro do quadrado porque é metade da largura e metade da altura da tela. Eu vou torná-lo do mesmo tamanho que antes, então a largura da tela dividir por dois, canvas.height dividir por dois, porque nós temos frigideiras agradáveis para baixo para mesclar no navegador. Isto é bom se você quiser realmente preencher o retângulo como fizemos com uma cor especificada, mas se uma vez realmente apenas para desenhar um retângulo mostrando apenas o contorno sem cor de preenchimento, podemos fazer isso usando o método strokeRect. Novamente, vamos começar com ctx e, em seguida, usamos StrokeRect. Vamos desenhar o exterior ou o contorno de um retângulo. Então, faça esta posição de tempo 25, 25, e que o tornará um bom simples 100 por 100 quadrado. Lá podemos ver que temos o retângulo ou o contorno dos quadrados. Claro, a única diferença entre desenhar um quadrado ou um retângulo usando FullRect e StrokeRect, é simplesmente a largura e a altura que especificamos dentro do parêntese. Então poderíamos facilmente mudar isso para ser um pouco mais largo, e então transformar o quadrado em um retângulo. É isso. Espero que você tenha gostado do seu primeiro gosto de scripts usando a tela, e como desenhar retângulos e quadrados. Sinta-se livre para brincar com isso, e te vejo no próximo vídeo. 5. Noções básicas do Canvas: entendendo as coordenadas do Canvas: No último vídeo, vamos desenhar alguns retângulos e alguns quadrados na tela. Você foi apresentado a algumas coordenadas básicas do Canvas. Nós só queremos tirar alguns momentos agora apenas para olhar as coordenadas do Canvas com mais detalhes. Compreender como as coordenadas funcionam realmente irá ajudá-lo à medida que você progride neste curso. Já sei que 0,0 é o canto superior esquerdo do Canvas. Se imaginarmos que esta grade é a Tela e cada pequeno quadrado contido dentro da grade é um pixel. Como estamos usando o contexto 2D, temos o eixo x e y. O eixo x é executado horizontalmente através da Tela, enquanto o y é executado verticalmente. Teremos a posição 0, 0 no canto superior esquerdo representado pelo pequeno ponto. À medida que o valor x é aumentado, percorremos o Canvas horizontalmente. Se atravessarmos quatro pixels, estes são os pontos de partida do quadrado, então x é igual a quatro. Porque os pontos de partida do quadrado é apenas um pixel do topo. Isso torna o valor y igual a um. É exatamente o mesmo que vimos no último vídeo, onde definimos a posição 0, 0 do primeiro retângulo. Em seguida, definimos o segundo retângulo, ou o segundo quadrado para começar no centro da Tela para criar um quadrado no canto inferior direito. Definimos a posição x e y para 150 por 150, que estava exatamente a meio caminho no meio da tela. Ser capaz de obter sua mão em torno dessas coordenadas desde um estágio inicial vai realmente ajudá-lo à medida que você progride através do curso. Vale a pena saber que particularmente o eixo na geometria tradicional e em várias indústrias diferentes, um valor y positivo, realmente aumentaria. Enquanto na tela, todos os valores positivos para y vão verticalmente para baixo na tela. Se você vem de um fundo particular onde as coordenadas são feitas de uma maneira diferente, apenas tenha cuidado com isso. Espero que isso faça sentido. Agora passaremos a criar mais desenhos. 6. Noções básicas do Canvas: linhas e caminhos: Neste vídeo, vamos dar uma olhada nas linhas e caminhos que podemos fazer usando a tela HTML. Vamos começar por fork no último vídeo, e eu vou mudar o nome para ser simplesmente linhas e caminhos, eles são o mesmo com o título. Então vamos excluir tudo entre tags de script, exceto as duas primeiras variáveis que criamos. Vamos precisar deles em todos os vídeos que fizermos, podemos deixar como estão. Vamos começar com um exemplo simples de como desenhar algumas linhas e vamos fazer isso criando um quadrado, desenhando os quatro lados individualmente. Novamente, vamos trabalhar com o contexto, então ctx.. Vamos começar usando o método beginPath, e nós só precisamos deixar os parênteses vazios sobre isso, isso apenas especifica o início de um novo caminho. Agora, antes de começarmos a desenhar pouco antes de começarmos a adicionar o quadrado, vou apenas adicionar uma borda para que possamos ver o contorno da tela. Vamos definir o estilo para ser igual a borda, e vamos torná-lo 2 pixels para que possamos vê-lo em uma linha sólida. Vamos ter nossa tela de volta, de volta para você BeginPath e, em seguida, CTX.moveTo. Esta vai ser a nossa posição inicial a partir da qual queremos traçar a nossa linha. Quero definir a caneta para 10 pixels no eixo x, e também 10 pixels no eixo y. ou 10 pixels abaixo. Isto irá efetivamente mover a caneta para algum lugar por aqui, e esta será a nossa posição inicial. Em seguida, para realmente desenhar uma linha, usamos Ctx.Lineto, e então precisamos adicionar nossas duas coordenadas que vamos querer desenhar a linha entre. O primeiro que vamos adicionar é o eixo x de 290, e o eixo y de 10. Você percebe que nada apareceu na tela ainda, isso é porque para conseguir que isso realmente desenhe da mesma maneira o vídeo retângulos onde tivemos que usar traçado e preenchimento, precisamos fazer o mesmo para a linha. CTX.strok, isso irá traçar o contorno. A linha começa na posição x-10, y-10, nós escolhemos 10 pixels em, e então vamos mover 290 ou mover para a posição 290 que está aqui e também manter essa posição de 10 pixels no eixo y. Vamos agora continuar com uma segunda linha 2 Ctx.Lineto. Queremos manter a caneta em 290, vamos mantê-la lá, mas queremos soltá-la no eixo y para 290. Vou obter uma linha vertical reta, e espero que você possa ver uma margem padrão, ctx.lineto. Agora precisamos voltar para a primeira posição x, que era 10 e manter o eixo y em 290. Na terceira linha, vamos terminar isso voltando para a posição 10, 10. Este é o nosso ponto de partida e, em seguida, criamos um quadrado completo. Retornar a linha para as coordenadas originais é uma maneira que podemos completar o quadrado, há uma maneira muito mais fácil de fazer isso. Vamos comentar esta linha com duas barras, esta linha não será vermelha. Em vez disso, porque usamos o método BeginPath no início, podemos colocar um caminho fora usando Ctx.ClosePath. Então isso voltará agora à posição inicial original e completará o quadrado. É assim que desenhamos um quadrado usando traço. Se você quiser que os quadrados tenham um preenchimento de cor, podemos mudar ctx para ser preenchido, e então teremos a cor preenchida com o preto padrão. Podemos alterar a cor padrão para ser qualquer coisa que queremos usando o método de estilo de preenchimento como usamos para os retângulos. Vamos seguir em frente desenhando mais algumas formas novas, vamos desenhar um triângulo. Vamos começar criando um novo caminho. Vou começar o caminho do triângulo e depois mover a caneta para a posição inicial. Para ter isso dentro do quadrado por mais 10 pixels teremos a posição inicial desta vez definida como 20, 20, e vamos criar as primeiras linhas, Ctx.Lineto. Para fazer a primeira linha atravessar o topo para o início do triângulo, precisamos fazer a posição 10 pixels para cada cruz. Este foi 300 para o contorno da tela, 290 para a borda da praça. Vamos trazer mais 10 pixels e fazer este 280, e a posição Y pode permanecer em 20. Então, para fazer isso um triângulo igual, precisamos movê-lo para baixo para a posição 20 no eixo x, e um valor Y para torná-lo igual a 280 que é basicamente o oposto a este um CTX.Lineto, o valor X de 20, o valor Y de 280. Em seguida, para voltar ao topo, vamos simplesmente fechar o caminho usando Ctx.ClosePath e, em seguida, para fazer isso aparecer, vamos adicionar ctx.fill. Na verdade, não vemos o triângulo aparecer na tela. Isso ocorre porque a cor de preenchimento padrão que mencionamos anteriormente também é preta, que está se misturando com a mesma cor que o quadrado. Antes de preenchê-lo, podemos adicionar um FillStyle, e vamos definir a cor para ser o valor hexágono novamente de 99ccff. Podemos ver o triângulo se destacando no fundo. Vamos adicionar mais um triângulo, mas desta vez vamos adicionar um traçado em vez de um preenchimento. Eu só vou copiar este triângulo e apenas adicionar isso abaixo. Claro, em vez de ctx.fill, usaremos traço. Vamos mudar o FillStyle para ser vermelho, apenas para que possamos ver no fundo azul. Vamos compensá-lo do primeiro triângulo, vamos configurá-lo para ser a posição inicial de 40, 40. Todos os 20 podem ser alterados para 40, e para torná-lo igual vamos mudar 280 para 230, e deve fazer um triângulo uniforme agradável. Na verdade, isso quer ser StrokStyle, porque você está usando um traçado em vez de um preenchimento. Então essa é a nossa cor vermelha para o contorno. Pouco antes de terminar este vídeo, eu só quero mostrar alguns métodos diferentes para traços de linha, eles são SetLineDash e GetLineDash. Para usar o setLineDash podemos adicionar isso ao último triângulo. Eu só vou adicioná-lo antes das linhas que eu realmente desenhei, vamos apenas adicionar isso abaixo BeginPath. Vamos usar a variável de contexto novamente, então ctx, isto é setLineDash. Certifique-se de usar letras maiúsculas para cada palavra além da primeira. Então precisamos adicionar alguns valores dentro do parêntese, precisamos realmente adicionar uma matriz. Vamos usá-los com os colchetes, abrir os colchetes assim. Para começar com um simples LineDash, vou adicionar dois valores diferentes, 10 adicionar 10. Isso faz com que um LineDash simples que tem 10 pixels de largura. Que é definido pelo primeiro valor e, em seguida, um intervalo de 10 pixels entre cada uma das linhas. Se você quiser que essas linhas fiquem mais distantes, podemos mudar o segundo valor, assim mesmo. Esses valores são apenas loop through até que ele atinja o final da linha. Podemos adicionar mais de dois valores, podemos adicionar um número ímpar. Se mudarmos isso para ser 10, 20, 30, o valor de três simplesmente loop até o final da linha. Vamos dar uma olhada nos traços de linha. Podemos ver se começarmos aqui, há uma primeira linha de 10 pixels, uma lacuna de 20 pixels, depois uma terceira linha de 30 pixels. Então, de volta ao início, temos uma lacuna de 10, uma linha de 20, e uma lacuna de 30, é 10, 20, 30 novamente, e assim por diante até voltar ao início. Por último, eu só quero mostrar rapidamente GetLineDash. GetLineDash é algo que você pode nunca ter qualquer uso para, mas eu vou mostrar-lhe como usá-lo apenas para o caso. Sob o setLineDash, eu vou criar uma nova variável, e esta variável vai começar nos detalhes do LineDash. Eu só vou chamá-lo de algo relevante, como LinedAshPattern, e então quando eu definir isso para ser contexto. e o método que precisamos usar em vez de setLineDash é GetLineDash. Vou começar dentro desta variável, vamos abrir o console e fazer um log de console, console.log e, em seguida, a coisa que queremos registrar é essa variável. Vamos adicionar isso lá dentro, e então eu vou abrir o console que é apenas na parte inferior lá, clique sobre isso. Há a nossa matriz de valores de retorno para o LineDash. Temos 10, 20, 30, e depois é repetido. Novamente, isso é algo que você pode nunca precisar, mas está lá apenas no caso de você precisar. Obrigado, e te vejo no próximo vídeo. 7. Noções básicas do Canvas: largura da linha e correspondência com pixels: Bem-vindo de volta. Neste vídeo, vou mostrar como mudar a largura da linha, ou a espessura das linhas. Eu também vou dar uma olhada no conceito importante de muito em pixels. Para começar, vamos apenas bifurcar o último vídeo, que era linhas e caminhos. Então, uma vez feito, mudaremos o nome. Larguras de linha e correspondência com pixels, eu só vou copiar isso, e colar isso no título, exatamente assim. Então poderíamos remover algumas das partes desnecessárias do script que não precisamos. Para este vídeo, não precisamos do quadrado original, então vou apagar a primeira seção. Também podemos remover o primeiro triângulo. Deixaremos o terceiro triângulo, mas removeremos os traços de linha. Portanto, remova a linha definida, a linha tracejada, a variável e também o log do console. Então estamos prontos para ir. Guarde isso. Deveríamos ser deixados com um contorno do triângulo vermelho. Mudou a largura de uma linha de traço, é muito simples de fazer. Precisamos usar ctx, o método que usamos é LineWidth. Vou definir um valor, digamos um valor inicial de um, e ver o que acontece. Nós não temos nenhuma diferença, então vamos tentar aumentar isso para 10, e ver o que acontece. Também temos uma linha muito maior, ou uma linha muito mais larga, do que tínhamos antes. Vamos torná-lo ainda mais visível, então vamos aumentar para 26. Isso é praticamente tudo o que precisamos fazer para mudar a largura da linha. É mesmo assim tão simples. Mas um conceito mais importante, que é um pouco mais complicado de entender, é muito em pixels. Às vezes não fazemos muito para pixels corretamente, podemos acabar com linhas borradas. Só para mostrar um exemplo, vou copiar este triângulo que acabamos de usar, e depois colar em um segundo triângulo. Mas desta vez vamos mudar a LineWidth para ser um valor ímpar de 25. Apenas para compensar o triângulo para que possamos ver a diferença, mudar todos os anos 40 para 80, e todos os valores de 230 para 270. Então guarde isso. Agora temos que compensar triângulos. Um tem uma largura de 26 pixels, e outro é 25. Só para mostrar o que quero dizer, eu só vou ampliar, no navegador, e espero que você possa ver isso em casa. Caso contrário, deve ser um pouco mais fácil de ver no seu próprio computador. O segundo triângulo que acabamos de criar, tem um contorno embaçado. O primeiro, que desenhamos tem um contorno nítido. Vamos dar uma olhada no porquê disso. Para ajudá-lo a entender exatamente por que isso está acontecendo, eu gostaria de dar uma olhada nos dois exemplos. O primeiro no lado esquerdo, é uma grade de Canvas simples, com uma linha verde, a linha verde tem um pixel de largura. Isso é desenhado no eixo x, com sete pixels de diâmetro. A linha vermelha indica o centro da linha. Começando do zero, se atravessarmos sete pixels, foram levados direto para o centro da linha verde que desenhamos. Como a linha verde tem apenas um pixel de largura, a Tela a desenha meio pixel para a esquerda e, em seguida, meio pixel para a direita. Como você pode ver, isso não preenche um pixel inteiro, se olharmos para as grades quadradas no fundo. Então o que acontece é que a tela desenha ou preenche, o resto do pixel com uma sombra parcial. Este é o efeito desfocado que você pode ver no exemplo anterior. Tudo o que precisamos fazer para tornar a linha muito o pixel, é dar uma olhada no exemplo à direita. Em vez de a posição inicial ser em sete, mudamos para 6,5. Verticalmente, a linha central está a meio caminho entre o pixel, e isso faz com que a largura da linha ocupe o tamanho total do pixel e, portanto, nenhum sombreamento extra como este exemplo é necessário. Portanto, temos linhas afiadas, nenhum efeito desfocado no exterior. Algo que eu queria que vocês pensassem, e que estivessem cientes, ao desenhar linhas ou formas na tela. Obrigado e adeus por agora. 8. Noções básicas do Canvas: cantos e esquadrias: Este vídeo é tudo sobre cantos e mitras. Vamos criar uma nova Caneta para este vídeo com [inaudível] a última. Então, como de costume, basta mudar o título para ser cantos e mitras e o mesmo dentro do título HTML. Vamos criar mais espaço. Então, para este exemplo, eu vou apenas deixar o primeiro triângulo do último vídeo e depois me livrar do segundo. Lá vamos nós. O triângulo que temos na tela tem cantos afiados. Podemos alterar isso usando várias propriedades. Podemos adicionar cantos arredondados em cantos chanfrados, bem como esses cantos de mitra que você pode ver por padrão. A maneira de fazer isso é usar o context.LineJoin, e então podemos definir o tipo de junção que queremos usar para cada um dos cantos. O primeiro que vou adicionar é redondo, e depois guarde isso. Podemos ver que as bordas nos cantos livres do triângulo agora têm uma borda arredondada muito mais suave para eles. Também podemos mudar os cantos arredondados para ser um chanfro. Isso adiciona muito mais de um efeito quadrado a cada um dos três lados. A terceira propriedade, que podemos adicionar é a mitra, e a mitra é os padrões que começamos com. Isso não vai realmente fazer nenhuma alteração do triângulo original, nós apenas ficamos com os três cantos afiados. Se o efeito mitra é o que você está procurando, você não precisa adicionar esta linha em como seu padrão. São três estilos que você pode adicionar aos cantos. Em seguida, quero mostrar como usar o LineCap. LineCap é uma técnica que você pode usar para alterar o estilo das extremidades da linha. Para demonstrar isso, vou apenas remover as duas últimas linhas do triângulo. Faça isso em linha reta. Então podemos mudar LineJoin para ser LineCap. O padrão é a extremidade e isso é apenas as bordas quadradas que vemos em uma linha padrão. Ele quadra cada uma das extremidades e é o estilo padrão se nada mais for especificado. Nós também podemos alterá-los para serem redondos, assim como com o exemplo do triângulo, que acabamos de olhar. Temos um bom canto arredondado em cada uma das extremidades da linha. Agora, o último é o quadrado. Ao usar um quadrado, você pode não notar muita diferença e, na verdade, parece bastante semelhante à bunda que acabamos de olhar antes, que é o padrão. No entanto, ao usar o quadrado, ele realmente torna a linha um pouco mais longa porque um quadrado é adicionado em cada extremidade da linha. O quadrado estende-se metade da largura da linha, por isso torna um pouco mais longo em cada extremidade. É apenas uma diferença sutil, mas vale a pena ter em mente se você precisa ter controle sobre o comprimento da linha. É assim que você usa LineJoin e também LineCap. A terceira e última técnica que queremos dar uma olhada neste vídeo, é como usar o MiterLimit. Vamos dar uma olhada em alguns slides para obter uma melhor compreensão. Criei um esboço para te dar uma melhor compreensão do MiterLimit antes de entrarmos em qualquer código. Na sua frente há dois cantos diferentes com ângulos diferentes. Como você pode ver, esses ângulos diferentes criam um comprimento diferente de mitra. Dos pontos internos para os pontos externos, o comprimento é muito maior neste exemplo do que na esquerda. Podemos realmente ter controle do comprimento desta mitra usando o MiterLimit. Podemos controlar o comprimento da mitra se quisermos usando MiterLimit. Se o comprimento da mitra for maior do que o MiterLimit, que definimos, o canto, como você pode ver no exemplo certo, é chanfrado ou efetivamente cortado. Podemos usar isso para ganhar controle sobre o comprimento de nossas mitras. Vamos voltar para a CodePen e colocar isso em prática. Para este exemplo, só precisamos adicionar outra linha. Basta fazer isso em um canto, então crie um LineTo. Eu vou fazer isso 30.100. Eu deveria brincar com isso para ter um canto legal. Eu vou fazer isso 250 e 70. Vou mudar o x e y para a caneta passar para 30 e 30. Agora, vamos fazer a largura da linha um pouco menor, mudar isso para 10. Podemos ver o ângulo completo ou o canto completo agora na tela. Também não precisamos do LineCap do exemplo anterior. Ok, a primeira coisa que precisamos fazer é definir o LineJoin para ser o tipo de mitra. Vamos acrescentar isso aqui agora. LineJoin é igual a mitra, então podemos adicionar o MiterLimit logo abaixo. Vamos começar com o valor de 10. 10 é, na verdade, o valor padrão. Você não notará nenhuma diferença definindo isso como 10. Temos uma ponta longa e afiada, um canto afiado. Vamos tentar reduzir para cinco e ver o que acontece. O valor de 5 é menor que o comprimento do canto, portanto, agora está sendo definido como uma extremidade chanfrada. Podemos usar isso para restringir a nitidez de um canto. É assim que podemos usar cantos e mitras com a tela. Vamos agora para o próximo vídeo onde vamos dar uma olhada em arcos e círculos. 9. Noções básicas do Canvas: arcos e círculos: Passando dos cantos e mitros do último vídeo, vamos agora dar uma olhada em arcos e círculos. Vamos criar uma nova CodePen para isso. Então garfo o último vídeo, então vamos criar um título de arcos e círculos. Eu vou ler todo o script exceto a tela e as variáveis de contexto, então vamos começar de novo dentro disso. Antes de começar a escrever qualquer código, vamos dar uma olhada em alguns slides para obter uma melhor compreensão de como usar arco. Este é o método arco e leva em vários parâmetros. Para começar, temos as propriedades X e Y e estas são o centro do arco. Então, bem no meio do arco ou do círculo que queremos criar. A terceira propriedade é o raio de modo que o raio é a distância do centro para o exterior do círculo. Então temos o ângulo inicial e o ângulo final. Precisamos entender que o arco usa radianos em vez de graus. Então apenas horizontal ou o eixo X, esta é a posição inicial ou zero. Isto é efetivamente às três horas. Em seguida, um quarto do caminho redondo, isso será 0,5 vezes pi. Metade rodada seria um vezes pi, 1,5 e, em seguida, duas vezes pi seria uma rotação completa ou um círculo completo. O último parâmetro é onde queremos que o arco seja desenhado no sentido horário ou anti-horário. Este é um valor booleano que é definido como verdadeiro ou falso. Então, por padrão, ele é definido para o sentido horário. Se definirmos isso para ser verdade, poderíamos então mudar isso para ser anti-horário. Para este exemplo, o ângulo inicial seria zero. Nós queremos que ele vá no sentido anti-horário todo o caminho em volta para 0.5. vezes pi para o ângulo final. Se você quiser descobrir o que radianos são em relação aos graus, há algumas calculadoras on-line, então basta dar um rápido google e você será capaz de encontrar o que você precisa. Vamos agora voltar ao CodePen e dar uma olhada em alguns exemplos. Vamos começar criando nosso primeiro arco. Vou começar um caminho para começar. Então vamos criar o arco, então ctx.arc. Nós adicionamos os parâmetros dentro dos suportes, assim como olhamos nos slides antes. Os dois primeiros valores é o centro do arco. Vou fazer o meu centro interior da tela. Então 150,150 então o raio eu vou fazer o meu 80. A posição inicial, a minha será definida como zero. Em seguida, o ângulo final, eu vou fazer o meu uma vez math.pi. A posição inicial de zero é sobre a posição de três horas. Temos a posição de chegada para ser uma vez Math.pi, que é mais na posição das nove horas. Para desenhar isso, só precisamos adicionar o traçado ou o preenchimento. Então CTX. traço apenas para nos dar o contorno, então lá estamos porque isso é padrão para o sentido horário. Vai girar no sentido horário. Se quisermos que isto seja o contrário, podemos mudar para ser verdade. Então vamos pegar o arco que vai girar no sentido anti-horário. Nós também pode preencher a seção do arco usando ctx.fill. Há um preto padrão que já vimos em vídeos anteriores. Claro que podemos mudar o estilo de preenchimento, se isso é algo que você quer fazer. Se quisermos criar o círculo completo, como olhamos anteriormente, só precisamos mudar o ângulo final para ser duas vezes pi e isso cria um círculo completo. Estou tentando mudar de volta por enquanto. Em seguida, vou dar uma olhada em ArcTo e ArcTo pode ser um pouco mais difícil de entender. Vamos dar uma olhada em um bom exemplo que eu encontrei online. Isso está disponível em rgraph.net. Se você fizer uma pesquisa por rgraph e também a função ArcTo, você deve ser capaz de encontrar este exemplo interativo. Para entender o ArcTo, precisamos estar cientes de que há mais do que apenas um ângulo de início e fim. Começamos com o P0, que fica no canto inferior esquerdo. Podemos mover isto se quisermos. Vamos começar definindo P0, que é a posição inicial, usando MoveTo. Em seguida, definimos o valor de P1, que é um ponto onde essas duas linhas se encontram. P2 é então a posição final. Em seguida, usamos LineTo para continuar com a linha verticalmente para o ponto final. Este é um ótimo exemplo porque podemos mover qualquer um desses pontos e obter uma melhor compreensão de como tudo funciona. Vamos voltar ao CodePen e criar um exemplo para nós mesmos. Ainda dentro das tags de script, vamos criar um novo caminho. Vamos começar o Caminho. Logo abaixo do último exemplo. Na verdade, vamos criar um pouco mais de espaço para jogar, então vamos fazer a largura para ser 600 apenas para que possamos apertar os dois. Nós vamos soprar. Em seguida, a primeira coisa que precisamos fazer é criar um ponto de partida para ctx.moveto. A posição em que vamos começar é X, 300 e então Y, 150, então crie um ponto de partida, que é efetivamente P0. Então eu vou continuar a linha com um Lineto. O ponto que eu gostaria de definir o LineTo é 400,150. Vamos adicionar o traço para que possamos ver as linhas enquanto as desenhamos. Aí está nossa posição inicial. Agora movemos a linha em 100 pixels. Temos Lineto. Então vamos criar o método ArcTo. Vamos criar as coordenadas, que é para P1, que é apenas aqui em cima. Eu vou definir o meu para ser 500,150 então isso, em seguida, cria a posição imaginária P1. Então, porque queremos que a linha se curva e se mova para baixo no eixo Y, vamos fazer 500, depois descer para 300 e, em seguida, um raio de 75. Em seguida, para estender a linha até a posição de chegada, que é 500,300, então você apenas estende a linha com um lineTo de 500,300 e há o nosso ArcTo completo. Só para recapitular, mudamos para a posição 300,150, que é aqui. Em seguida, criamos uma linha, 100 pixels [inaudível] através da qual leva uma linha horizontalmente. Nós então criamos o ArcTo então o primeiro valor de 500,150 é a posição imaginária P1, que está aqui. Então, porque queremos que o arco para, em seguida, curva arredondada, vamos então soltar o valor Y para ser 300 e 500,300 é a posição final, que é aqui em baixo. Em seguida, estendemos a linha para ser reta até a posição de chegada criando o arco completo. Espero que isso faça sentido. Provavelmente brincar com os valores e ver o que você pode criar. Também faça um pouco de brincadeira com o exemplo interativo. É assim que podemos adicionar arcos e círculos à tela. Se você voltar no próximo vídeo, vamos dar uma olhada no texto do desenho. 10. Noções básicas do Canvas: adicionando texto na tela: Neste vídeo, vamos passar do desenho de formas e linhas, e eu vou mostrar a vocês como adicionar texto à tela, e como adicionar vários estilos e efeitos para fazer seu texto realmente se destacar. Eu fui em frente e copiei o último vídeo e criei uma caneta de código de texto adicionando, e depois limpei a seção de script, deixando a tela e as variáveis de contexto. A maneira de adicionar texto à tela é usando FillText e também StroketExt, e você deve ser capaz de adivinhar o que esses dois fazem de vídeos anteriores. O stroketExt desenha o contorno e FillText desenha o texto com um preenchimento de cor. Vamos começar usando FillText. Então ctx.fillText e, em seguida, os colchetes depois disso. A primeira propriedade que precisamos adicionar é o texto que queremos exibir. Eu só vou adicionar um texto de adição de texto da tela. Em seguida, as coordenadas iniciais de 0, 0. Percebemos que se olharmos para a tela do lado direito, não podemos realmente ver nenhum dos textos que acabamos de desenhar. Isso ocorre porque as coordenadas de texto de 0, 0 estão na verdade na parte inferior esquerda do texto. Para movê-lo para baixo para que possamos vê-lo na tela, vamos mudar o valor y para ser 50. Agora podemos apenas vê-lo aparecendo na tela lá. Para torná-lo um pouco maior, podemos adicionar alguns estilos de fonte, ctx.font. Vamos definir a fonte para ser igual a 50 pixels para torná-la maior, e também o tipo de fonte para ser Helvetica. Na verdade, para que isso funcione, só precisamos colocar isso antes do FillText, e isso deve fazer com que o texto seja maior agora. Lá vamos nós. Isso é muito maior agora, e nós mudamos a fonte. O tamanho padrão é 10 pixels, e é uma fonte sans-serif. Agora, vamos dar um pouco de cor. Vamos adicionar um FillStyle, ctx.fillStyle. Para torná-lo simples, eu só vou adicionar um nome de cor roxo. Em seguida, vamos empurrar o texto para o centro da tela usando TextAlign. Vou colocar isso no centro. Certo, isso não é exatamente o que estamos procurando. Se quisermos que o texto apareça no centro da tela, precisamos alterar a posição inicial no método fillText. Atualmente, o texto está centralizando sobre as coordenadas zero, que é por aqui. Vamos empurrar isso para o meio da tela. Vamos adicionar lona. Largura acima de 2. O texto é referenciado a partir da metade da tela de pintura. Vamos fazer o mesmo para esse valor, mudar 50 para ser a altura da tela dividida por 2, e essa é a linha de base do texto a ser no centro da tela. Está bem. Em seguida, vamos dar uma olhada na linha de base do texto. Antes de olharmos para isso, eu só quero traçar uma linha bem no centro da tela, e você verá o porquê em um momento. Vamos criar rapidamente uma linha. Mover para 0 tela.altura dividida por 2. Vamos traçar a linha. A linha vai ser a largura da tela, e então a posição y vai ser tela.altura dividir por 2. Vamos desenhar a linha com o golpe. Ok, agora temos uma linha aparecendo no centro da tela, e você verá o porquê em um momento. Eu só vou mover o texto apenas para o fundo lá. Vamos começar a brincar com a linha de base do texto. Por baixo, vou apenas adicionar CTX.TextBaseline. Como está atualmente, temos o texto também bem na linha com as caudas penduradas abaixo da linha imaginária. Vamos alterar isso alterando o TextBaseline para ser inferior, e vamos ver o que acontece. Isso efetivamente empurra o texto para cima. Cada letra ou cada parte de cada letra agora repousa sobre a linha de base. Há algumas opções diferentes que temos que olhar para a linha de base, também podemos usar topo, e isso empurra tudo abaixo da linha de base. Também podemos usar meio, e isso adiciona a linha de base para ser através do meio do texto. Há também alfabético. Isso nos traz de volta ao início, pois esse é o valor padrão. O último que vou te mostrar está pendurado. Ao usar pendurado, ele realmente parece um pouco como quando se usa topo. No entanto, não há espaço entre o topo das letras e a linha de base. Eles estão efetivamente pendurados fora da linha de base lá. Ao usar o método fillText, há realmente mais um parâmetro que podemos adicionar, e este é um valor opcional. Isso define a largura máxima, que podemos usar para restringir o texto a um determinado tamanho. Como exemplo, vou restringir o texto para ter 200 pixels de largura. Você pode ver que esmaga o texto. Vamos mudá-lo para 300, o que torna um pouco mais largo. Isso é útil se quisermos manter os limites do texto dentro de um determinado contêiner. Claro, assim como ao usar todas as formas em vídeos anteriores, vez de usar preenchimento, podemos alterar isso para ser traçado ou texto de traçado. Em seguida, basta obter o contorno do texto em vez de uma cor de preenchimento sólida. É assim que podemos adicionar texto à tela e como podemos adicionar estilo ao nosso texto. Agora vamos passar para o próximo vídeo. Vamos dar uma olhada na remoção de seções da tela. 11. Noções básicas do Canvas: removendo seções da tela: Bem-vindos de volta, rapazes. Este vídeo é chamado de Remoção de Seções da Tela. Eu vou dar uma olhada em um par de métodos diferentes para ambas as seções de encobrimento do Canvas, e também remover completamente os pixels que tinham sido desenhados para certas áreas do Canvas. Mas vamos dar uma olhada em como cortar uma área da Tela para restringir o desenho a uma determinada forma. Eu fui em frente e garfo o último vídeo e defini o título para remover seções do Canvas. Agora vou remover todos os scripts como de costume, exceto o Canvas e as variáveis de contexto. Então, por fim, eu vou mudar o estilo no fundo, e vamos definir isso para ser vermelho. Você verá o porquê em um momento. Usando o que já sabemos, podemos criar o efeito de remover seções da Tela apenas adicionando uma forma como um retângulo com uma cor de fundo como branco. Vamos fazer isso agora. Primeiro de tudo, defina o estilo de preenchimento do retângulo, e eu vou fazer isso branco. Então vamos criar o próprio retângulo com FillRect. Vou criar o meu no canto superior esquerdo. Então zero-zero para a posição inicial, uma largura de metade do Canvas, que é 300, e então eu quero definir a altura para ser metade do Canvas novamente, de 150. Em seguida, obtemos um retângulo branco no canto superior, que dá a ilusão de que parte da Tela foi removida. No entanto, isso é apenas cobrindo o objeto que está sendo desenhado em vez de realmente remover quaisquer pixels. Se quiséssemos realmente remover quaisquer pixels dentro de uma determinada área que já foi desenhada, podemos fazer isso usando o método ClearRect, e isso realmente remove todos os pixels dentro de uma determinada área. Vamos dar uma olhada nisso. Se quiséssemos remover parte do retângulo que acabamos de desenhar, poderíamos usar CTX.clearRect, e os parâmetros funcionam da mesma maneira que o FillRect. Começamos com a posição que queremos começar, que no meu caso é zero. Eu só vou criar um quadrado de 100 por 100 para remover, que você pode ver que é apenas sobre o canto superior. Isso removeu os pixels que foram desenhados nesta seção 100 por 100. Claro, se você quiser limpar toda a tela, você pode simplesmente adicionar tela.largura e também tela.altura. Isto irá selecionar toda a área da Tela e limpar todos os pixels que foram desenhados para ela. Vou colocar um comando na frente disto só para recuperar o nosso triângulo branco. O último método que quero mostrar é clipe. Se você já usou uma máscara de recorte em software de edição de fotos, como o Photoshop, clipe funciona com os mesmos efeitos. Declaramos uma seção que queremos recortar, como um retângulo ou um círculo , então qualquer outra coisa que desenhamos na Tela só será visível dentro desta área desenhada. Qualquer outra coisa fora desta área não será visível. Vamos dar uma olhada em um exemplo. Só vou desenhar mais um retângulo. Desta vez eu vou criar um retângulo branco no canto inferior direito. Vou definir a posição inicial para estar no centro do Canvas, de modo que são 300, 150. Então exatamente o mesmo para o tamanho 300 por 150. Para criar este clipe, vou primeiro desenhar um círculo no centro da Tela. Podemos usar um círculo para ser a área que queremos restringir o desenho. Vamos adicionar um círculo ou um arco. Nós sabemos como fazer isso. Podemos usar ctx.arc. A posição inicial está no centro. A largura da tela dividida por dois. O mesmo para as alturas. O raio de 150. Em seguida, para desenhar um círculo completo, vamos começar com o zero como a posição inicial e, em seguida, duas vezes Math.pi. Então vamos desenhá-lo com o derrame. Agora, há o nosso círculo que é a altura total da tela. Agora, se quisermos restringir todo o desenho para estar dentro do círculo, podemos então cortar essa área. Temos ctx.clip. Agora, todos os retângulos e todos os objetos que foram desenhados só são visíveis dentro deste círculo ou desta área que criamos. Tudo o que resta fora do círculo é simplesmente a cor de fundo da tela. É assim que podemos remover seções do Canvas. Analisamos como encobrir certas áreas, observamos como remover pixels da Tela e, finalmente, observamos o método do clipe para restringir todo o desenho dentro de uma determinada área, como o círculo que desenhamos. Vamos deixar este vídeo lá, e eu vou vê-lo no próximo vídeo onde vamos dar uma olhada em gradientes. 12. Noções básicas do Canvas: gradientes: Bem-vindos de volta, rapazes. Neste vídeo, vamos dar uma olhada em como usar gradientes dentro da tela. Em particular, vamos dar uma olhada em dois tipos diferentes. Vamos dar uma olhada em gradientes lineares e radiais. Para começar, criei uma nova caneta, intitulada gradientes. Vou remover o script da tela, que não precisamos. Todas as seções abaixo das duas variáveis podem ser removidas. Vou deixar o fundo de estilo vermelho, tudo bem. Vamos começar apenas com um comentário, apenas de gradientes lineares. Vamos começar usando o método de gradiente linear de criação. Então ctx.CreateLinearGradient, e como de costume, tenha cuidado com as letras maiúsculas para linear no gradiente. Então, dentro dos colchetes, precisamos especificar a posição inicial e final. Então eu vou criar um gradiente de um canto da tela, em uma linha reta para o outro. Isso vai ser usado para misturar de uma cor para outra, ou até mesmo misturar usando quantas cores quiser. Então eu vou definir a posição inicial para estar no canto superior esquerdo, que é 0, 0, e, em seguida, a posição final para estar no canto inferior direito. Então vamos cortar isso com tela.largura e lona.altura. Então, em seguida, eu vou adicionar esta linha em uma variável. Então variável que eu vou chamar mina linear, porque é um gradiente linear. Vamos guardá-lo lá dentro. Podemos então usar esta variável para adicionar paradas de cor, que é a cor que gostaríamos de adicionar em várias posições ou vários estágios do gradiente. Então vamos adicionar a variável de linear.addColorStop. Então, dentro do método add color stop, eu vou adicionar dois parâmetros. Então o primeiro é um valor entre zero e um. Esta é a posição do gradiente onde gostaríamos que a cor fosse aplicada. Então zero é o início do gradiente, e um é o fim. Então eu vou definir a cor inicial para ser verde, e então eu vou adicionar mais dois. Então linear.addColorStop. Desta vez vamos fazer um ciclo de laranja. Quero que isto seja na metade do gradiente. Então eu vou defini-lo para ser 0,5 e cor para ser laranja. Então vamos definir mais um exatamente da mesma maneira. Mas desta vez no final do gradiente, que é a posição um, e depois a cor, eu quero definir o meu para ser vermelho. Então estamos quase lá agora apenas mais algumas linhas para fazer esse gradiente funcionar. Então, em seguida, vamos definir o FillStyle, que você já viu antes, ctx.fillStyle. Até agora, neste curso, temos definido uma determinada cor, como branco, vermelho ou preto, que gostaríamos de aplicar ao FillStyle. Mas desta vez podemos aplicar o gradiente adicionando a variável linear, que acabamos de criar. Então, por último, precisamos criar os retângulos, adicionar o gradiente também. Então vamos simplesmente usar um método fillRct. Vou criar este retângulo para ter o mesmo tamanho da tela. Então 0, 0, 600, 300, e salve isso, e lá temos. Aí está o nosso gradiente linear. Então começamos o começo, que é a posição zero. Começamos com uma cor verde e, no meio do caminho, nos misturamos em laranja. Então finalmente terminamos na cor vermelha, que é definida para ser a posição um, que é a última posição do gradiente, que é apenas aqui. Eu criei o retângulo para adicionar o gradiente linear também. Então eu mencionei no início deste vídeo que vamos dar uma olhada em dois tipos diferentes de gradientes. Então o primeiro sendo linear, e então o próximo que vamos dar uma olhada é gradiente radial. Assim, a diferença entre um gradiente linear trabalha entre dois pontos através de uma linha reta, enquanto um gradiente radial é circular e é uma mistura entre dois círculos imaginários, que nós especificamos. Então vamos dar uma olhada no gradiente radial. Assim como fizemos para o primeiro exemplo, eu vou criar uma variável, armazenar isso em. Então, desta vez vou chamá-lo de radial. Então defina isso igual a ctx.createRadialGradient. Então, os parâmetros que precisamos adicionar são diferentes do gradiente linear. Em vez de termos um ponto de partida e um ponto final, precisamos definir dois círculos imaginários. Um a começar e o outro a ser um círculo de fim. Então, para começar, vou criar os dois círculos nas mesmas coordenadas iniciais. Em seguida, criaremos o efeito de gradiente ampliando o raio do segundo círculo. Então vamos adicionar os seis parâmetros. Os três primeiros parâmetros são para o círculo inicial. Então eu vou criar isso no centro da tela, que é 300, 150. O terceiro valor é o raio do círculo inicial. Então eu vou definir isso para ser 10. Então vamos fazer o mesmo para o segundo círculo. Então, novamente, no centro da tela de 300, 150. Mas desta vez faremos o raio de 150. Então, assim como o exemplo linear, podemos usar a variável radial para adicionar as paradas de cor. Você pode adicionar qualquer cor que você gosta lá dentro. Vou manter o meu igual ao último exemplo. Na verdade, eu apenas copio essas duas linhas e mudo a variável para ser radial. Em seguida, defina o FillStyle, e isso é radial. Então, assim como antes, também usaremos FillRct. Vou configurá-lo para ser do tamanho total da tela. Então 0, 0, 600, 300. Agora temos o gradiente radial exibido na tela. Então criamos o primeiro círculo imaginário com o raio de 10. Este é o círculo interno menor, que tem a cor inicial de verde. Então, à medida que nos movemos para fora para o maior círculo, que tem um raio de 150, este é o ponto final onde nos misturamos a vermelho, que é o lado de fora do círculo. Então este efeito está sendo alcançado colocando dois círculos, ambos nas mesmas coordenadas iniciais de 300, 150. Claro, podemos brincar com isso e criar um deslocamento. Então, por exemplo, se mudarmos a posição x do círculo inicial para ser 200, isso move a seção verde para estar longe com a esquerda. Podemos brincar com isso e ter alguns efeitos legais. Então vamos mudar isso de volta, e nós também podemos mudar a posição do círculo final. Então eu vou mudar esse para 200 também. Isso compensa o segundo círculo para a esquerda também, dando-nos um efeito diferente lá. Então, ter um jogo com esses valores e ver o que você pode criar. Quando estiver pronto para passar para o próximo vídeo, veremos como adicionar imagens à tela. Te vejo lá. 13. Noções básicas do Canvas: adicionando imagens à tela: Vamos fazer uma pequena pausa de desenhar na tela. Vou dar uma olhada em como podemos realmente adicionar imagens à tela e como podemos trabalhar com elas. Eu fui em frente e criei uma nova caneta e chamei “Adicionando imagens à tela”. Vá em frente e crie um caso ainda não tenha feito isso. Para começar eu vou mudar o estilo, então vamos apenas remover a cor de fundo porque não precisamos disso. Então eu vou apenas adicionar a borda mais uma vez de dois pixels e uma linha sólida. Então vamos nos livrar da seção linear e radial de gradientes. Agora ficamos com uma tela em branco com a borda. Vamos começar adicionando elementos de imagem à tela e vamos armazenar isso dentro de uma variável chamada Imagem. Imagem variável é igual a uma nova imagem. Em seguida, podemos definir a origem da imagem com image.src e, em seguida, vamos adicionar o caminho para a imagem que você deseja adicionar. Para pegar uma imagem eu vou para a Wikipédia. Eu vou para wikipedia.org. Basta dar uma olhada em uma imagem com a qual você deseja trabalhar. Parece uma boa imagem, então vamos clicar nisso. Em seguida, se você clicar com o botão direito ou clique Control, podemos então clicar em “Copiar endereço de imagem” e, em seguida, colar isso dentro da fonte da imagem. Para obter isso para exibir, precisamos usar o método de desenho de imagem, então ctx.drawImage. Então, dentro dos colchetes, precisamos primeiro adicionar a imagem que você deseja adicionar. Nós temos isso armazenado dentro da variável de imagem, e então ele está na posição inicial para que o x e y de 0, 0. Isso deve fazer com que a imagem apareça no canto superior esquerdo. Como você pode ver, a imagem é muito maior do que a tela. Está muito mais longe do que podemos ver. Isso é fácil de consertar. Tudo o que precisamos fazer é definir o tamanho da imagem. Eu vou definir isso para ser do mesmo tamanho que a tela com lona. Largura, então vamos definir a altura para ser tela.height e salvar isso. É assim que podemos adicionar imagem à tela. Não estamos restritos a outras imagens novas sempre. Podemos realmente usar uma imagem que já foi adicionada, não só para a tela, mas para qualquer parte de uma página web. Então podemos pegar a imagem completa ou uma seção da imagem. Para fazer isso eu vou apenas copiar esta fonte de imagem, e então vamos excluir a imagem que acabamos de adicionar. Vou adicionar esta imagem como um elemento HTML, então fonte da imagem é igual a, e depois colar no link que acabamos de copiar. Você pode ver que a imagem apareceu abaixo da tela. Isso é bom. Vou apenas adicionar um ID, para possamos usar isso com scripts apenas de MyImage. Vou usar isso para pegar a imagem em breve. Então, apenas para restringir a altura, que possamos ver um pouco melhor na página, vamos definir isso para 300, e depois fechar a tag de imagem. Temos uma imagem existente que está aparecendo fora da tela. Queremos pegar a imagem completa ou uma seção particular. A maneira de fazer isso. Se voltarmos para as tags de script e, em seguida, podemos pegar esta imagem pelo seu ID. Vamos armazenar a imagem dentro de uma variável de imagem mais uma vez. A imagem é igual a documentos, e vamos pegá-la por seu ID com getElementByID. O ID que queremos pegar é minha imagem, então basta adicionar isso dentro de lá, e então podemos redesenhar a imagem na tela com CTX.DrawImage. O que você quer desenhar? Bem, é essa variável chamada Image, então vamos adicionar isso. Em seguida, a posição que queremos adicioná-lo é 0, 0. A imagem não aparece na tela de desenho. Isso ocorre porque estamos tentando cortar a imagem antes que ela seja realmente concluída o carregamento. Para superar isso, podemos adicionar uma função onload. Isso significa que nosso código de tela não será executado até que o documento tenha terminado de carregar. Isso inclui todas as imagens e todos os scripts. Vamos cercar todo o script atual dentro da função onload, então window.onload. Uma vez que o navegador tenha carregado, vamos acionar uma função. Vamos abrir as chaves, mas cercar todo o código existente dentro do script entre essas chaves. Vamos apenas recuar isto e salvar aquilo. Agora a imagem apareceu na tela, como algo a ter em mente, porque às vezes você tenta pegar uma imagem ou algo de uma página da web antes de ser realmente carregada, e então quando nada acontece, às vezes acho que há um problema com o código. Considerando que tudo o que precisamos fazer é esperar que a janela ou o navegador termine de carregar o script ou a imagem, e então podemos começar a trabalhar com ele. A última coisa que quero mostrar é como cortar ou cortar uma imagem. Nós também podemos fazer isso usando o mesmo método de imagem de desenho que você vai apenas pegá-lo e olhar para. A única diferença é que leva em muito mais parâmetros. Vamos dar uma olhada em um slide para descobrir como usar isso. No lado esquerdo está a imagem de origem. Esta é a imagem original, é de tamanho real. O primeiro parâmetro é simplesmente a imagem que queremos pegar. Em seguida, temos uma posição x e y que é o ponto de partida no canto superior esquerdo da área que queremos cortar. Vamos então definir a largura e a altura da área da imagem que gostaríamos de cortar. Então, no lado direito, temos os últimos quatro parâmetros que se relacionam com a tela e como gostaríamos de colocar na tela. Vamos começar com a posição x e y. Eles gostariam de desenhar a imagem recortada também. Novamente, este é o canto superior esquerdo da imagem em relação às coordenadas da tela de 0, 0. Então, por fim, temos a largura e a altura da imagem recortada. Este é o tamanho que a imagem terá quando colocada de volta na tela. Vamos voltar para a CodePen e colocar isso em prática. Usando o que acabamos de dar uma olhada, podemos adicionar alguns parâmetros adicionais para desenhar imagem. Em vez da imagem de tamanho completo, que temos atualmente, quero cortar um quadrado de 100 por 100 pixels do canto superior esquerdo da imagem original. Podemos deixar o primeiro valor como está, porque esta é a imagem que gostaríamos de pegar. Nós também podemos deixar a posição 0, 0 como este é o canto superior que queremos começar a partir. A área que queremos agarrar será de 100 por 100. Então, para colocar esta seção no meio da tela, vou usar tela.largura, dividida por 2, tire 50. Este 50 é metade da largura da imagem, então isso irá deslocar a imagem para estar no centro. Faremos o mesmo pela altura. Dividir por 2, tirar 50. Então manteremos o mesmo tamanho que a colheita original de 100 por 100 pixels, e aí temos. Este é o canto superior esquerdo recortado da imagem original que é desta seção. Então vamos colocar nesta área cortada no centro da tela com estes últimos quatro parâmetros. É assim que podemos adicionar imagens à tela e verei vocês no próximo vídeo. 14. Noções básicas do Canvas: padrões e sombras: Este vídeo é sobre o uso de padrões e sombras com a tela. Vamos começar com padrões, e para este exemplo eu vou adicionar uma imagem. Esta imagem será uma telha sem costura, que significa que podemos repetir o azulejo horizontal e verticalmente, e tudo se misturará em um. Criei uma nova CodePen com o título de Padrões e Sombras. Mudei a largura da tela para ser um pouco maior, que é 1.000 por 1.000. Isso ocorre porque o bloco que eu vou estar usando é 640 pixels, isso só dá um pouco mais de espaço para repetir o bloco. Se manter a função, a função onload do último vídeo, a variável de tela, a variável de contexto. Eu também reutilizarei essa variável de imagem que usamos no último vídeo. Para começar, eu só vou para Pixabay apenas para pegar um mosaico de imagem para uso nesta demonstração. Eu quero fazer uma pesquisa para azulejo sem costura, e então basta escolher um azulejo que você gosta. Eu vou para este e, em seguida, eu apenas clicar no download gratuito. Idealmente, queremos baixar a imagem e incluí-la em nossa pasta do projeto, vou ligar a partir daí. Mas como estamos usando o CodePen, a menos que você tenha uma conta PRO, você não criará isso como um ativo para realmente usar. Vou apenas para este exemplo, clique em “Ver” e, em seguida, selecione o endereço da imagem. Então vamos colar isso na fonte da imagem do último vídeo. Agora podemos usar essa imagem para criar um padrão, e o padrão é declarado de forma semelhante aos gradientes que vimos alguns vídeos atrás. Vamos empatar isso dentro de uma variável padrão, uma variável de padrão. Vou definir isso para ser CTX.CreatePattern. Criar padrão leva em dois parâmetros. O primeiro vamos adicionar a imagem que você deseja exibir e, em seguida, o segundo parâmetro é o tipo de repetições que queremos usar. Vou apenas fazer isso se repetir, e voltaremos a isso em apenas um momento. Em seguida, podemos definir o FillStyle para ser igual ao padrão que acabamos de criar. Então, por fim, definimos a forma que queremos ser preenchidos com o padrão, eu vou apenas adicionar um retângulo e mantê-lo do mesmo tamanho que a tela. 0, 0 e o tamanho da tela agora é 1.000 por 1.000. Podemos ver a imagem foi exibida, selecione seu esticar o navegador e ver tudo isso. A imagem foi repetida, agora está preenchida com o tamanho total da tela. Sabemos que foi repetido porque o Canvas tem 1.000 pixels de largura, mas a imagem tem apenas 640. Temos que repetir logo ali, e este é o início de um novo azulejo. Vamos dar uma olhada em mais alguns dos parâmetros. Isso foi repetido, eu posso mudá-lo para não-repetições e você provavelmente pode adivinhar o que isso faz. Isso altera a imagem para exibir apenas uma vez na posição especificada. Há também repetições no eixo x e y-. Então repetição-x, e isso significa que eles só se repetem através do eixo x, deve haver algum espaço em branco na parte inferior e, em seguida, vamos fazer o mesmo no eixo y. Há as repetições verticais, e é claro que você pode repetir o que quiser, não precisa ser uma imagem. Em seguida, queremos passar a olhar para sombras, e para fazer isso, eu só vou mudar a caixa de largura da tela para ser 600 por 300. Em seguida, podemos remover o exemplo padrão para mover toda a seção de imagem, toda a seção padrão, você também pode remover a imagem da parte inferior lá. Para este exemplo de sombras, vou desenhar algum texto na tela. Com ctx.font vai torná-lo bastante grande, vamos torná-lo 80 pixels. Em seguida, um tipo de fonte Helvetica e, em seguida, um FillStyle para ser igual a uma cor. Vou deixar o meu verde e depois o texto alinhar, vamos colocar no centro da tela. Tudo bem, vamos desenhar o texto com FillText. Espero que você se lembre de como fazer isso, o primeiro parâmetro é o texto que queremos exibir. Vamos mantê-lo simples, com sombras de texto é cinco neste exemplo. A posição X e Y, eu vou criar um tamanho de largura de tela dividido por 2, e, em seguida, o mesmo para a altura. O último parâmetro foi a largura máxima, vamos restringir isso para 400 pixels. Há texto, mas temos um pequeno erro de digitação nisso, que precisa ser px, claro. Temos o texto na tela, podemos começar a adicionar algumas sombras. Vamos fazer isso acima do texto que acabamos de desenhar. O primeiro método que vamos dar uma olhada é ShadowOffsetX. Este é um valor em pixels, vamos começar com cinco. Este é o ShadowOffset no eixo x, e então para que você possa ver a sombra que acabamos de criar vamos adicionar uma cor de sombra. Nós temos CTX.ShadowColor, ele se destaca muito bem, vamos mudar isso para ser vermelho. Podemos ver a sombra vermelha, que está se deparando com cinco pixels no eixo x. Esses valores podem ser positivos ou negativos, então vamos mudar isso para negativo cinco. Deveríamos ver a sombra do texto no lado oposto. Podemos fazer o mesmo no eixo y, temos um ShadowOffsety. Vamos adicionar uma sombra de cinco pixels no eixo y. Como você pode ver, podemos combinar o X e o Y para criar alguns efeitos de aparência agradável. Também podemos adicionar um desfoque usando o método ShadowBlur, e ele define o nível dos efeitos desfocados. O valor padrão é zero, vamos definir isso para ser algo um pouco maior, é apenas 15. Isso nos dá uma agradável borrada ou um efeitos misturados. Podemos aumentar isso para ser um pouco maior. Vamos tentar 30, e isso é um pouco mais sutil. Vamos mudar de volta para 20. Jogue um pouco com esses valores e veja o que você pode fazer, e eu vou vê-lo no próximo vídeo. 15. Dando um passo adiante: curvas de Bézier e quadráticas: Bem-vindos de volta, rapazes. Vamos começar um pouco as coisas agora e dar uma olhada em como usar curvas bézier e quadráticas. Vamos criar uma nova caneta para este vídeo. Então isso é chamado de curvas bézier e quadráticas. Deveríamos copiar isso de novo só para não precisarmos continuar lembrando como soletrar isso. Cole isso no título e guarde isso, torná-lo um pouco mais de espaço. Ele deve mover todo o script novamente exceto nossa tela e variáveis de contexto. Então, estamos prontos para ir. Primeiro vamos dar uma olhada nas curvas quadráticas. Para começar e explicar melhor como eles funcionam, primeiro vou desenhar três círculos ou três pontos na tela para referência. Vamos começar com um caminho, e você vê por que desenhamos isso em apenas um momento. Vamos criar os pontos de partida, e então vamos criar o nosso primeiro círculo, estamos em arco. Então eu vou fazer os pontos de partida 50, 250, raio de cinco, e a posição de zero para começar, e para fazer um círculo completo é duas vezes Math.pi. Eu só vou copiar este arco para que você possa usá-lo mais algumas vezes. Vamos passar para os segundos pontos para desenhar o segundo círculo. Então um é estar em 550, 50. Vamos desenhar o segundo arco ali, e então o terceiro será movido para a posição 50, 50, e depois o terceiro círculo, logo ali. Em seguida, para desenhar os círculos, usaremos o método de preenchimento. Vamos mudar tanto as posições dos arcos para eles se moverem. Então este é 550 e 50, e o terceiro é 50 e 50. Agora, nós também temos os três pontos na tela como uma referência. Então eu só vou adicionar um comentário. Este é o ponto de partida, este é o ponto final, e então o terceiro é o que chamamos de ponto de controle. Usamos QuadraticCurveTo para criar o que é chamado de curva bézier quadrática. Este tipo de curva começa a partir dos pontos atuais da caneta. Vamos começar com os pontos de caneta atuais usando um MoveTo. Esta é a posição que queremos começar, que é este primeiro ponto aqui. Então os pontos de partida foram 50, 250. Esses são pontos dentro dos suportes, que moverão a caneta para este ponto inicial ali. Em seguida, usamos o método QuadraticCurveTo, e leva os pontos de controle e também os pontos finais. Vamos acrescentar isso agora. Então CTX.QuadraticCurveTo. Os dois primeiros parâmetros são os pontos de controle, que é este. Esta é a posição 50, 50, e depois mais dois, que é o ponto final. Nós também temos os pontos finais de 550, 50, e então para realmente desenhar a linha, nós podemos usar o traço. Agora vamos ver o que acontece. Temos uma linha de curva quadrática agradável, então temos os pontos de partida para os quais mudamos, temos os pontos finais, que adicionamos apenas aqui, e então temos um ponto de controle, que efetivamente puxa a linha para criar o tipo de curva que queremos. Claro, podemos mudar isso para valores diferentes e isso afetará a posição da linha. Vamos mudar isso para 0, 0, e obtemos um tipo diferente de curva à medida que a linha é puxada mais para o canto. Em seguida, quero dar uma olhada em uma curva de bézier. Isso funciona de forma semelhante à curva quadrática, que acabamos de olhar. Mas em vez de tomar em um ponto de controle, usamos dois pontos de controle para ter um controle mais fino sobre a linha. Vamos apenas adicionar um comentário da curva de Bézier. Podemos começar a trabalhar adicionando algumas referências, como fizemos antes. Então CTX.beginPath. Desta vez, precisamos criar um ponto de partida, e ponto final, e, em seguida, dois pontos de controle para trabalhar. Para fazer o destaque na tela, vamos simplesmente mudar o FillStyle, desta vez para ser vermelho. O ponto de partida, vamos fazer o ctx.arc. O primeiro ponto é 100 por 50, um raio de 5 pixels. Farei um círculo completo, com duas vezes Math.pi. Vamos copiar este e, em seguida, adicioná-los com o ctx.fill. Lá vamos nós. Esse é o primeiro ponto, que é o nosso ponto de partida. Então criaremos o ponto final. Vamos adicionar um novo arco, e se eu pudesse fazer o MoveTo primeiro. No próximo, vamos adicionar nossa posição 500, 50 e, em seguida, adicionar o círculo no mesmo ponto, então esse é o nosso segundo círculo. Estes círculos que você está desenhando são puramente para fins de demonstração, apenas para que você possa ver como a linha está sendo puxada para pontos de referência. Na verdade, não precisamos incluí-los ao criar as curvas. Temos os pontos de partida, os pontos finais, e agora precisamos criar os primeiros pontos de controle. Então ponto de controle 1, e então vamos mover a caneta para ser a posição 100, 250, colar no arco na mesma posição de 100, 250. Então, ponto de controle 2, quero estar na posição 500, 250. Basta mudar o arco para 500 e depois 250. Isso deixa o ponto de partida, o ponto final e, em seguida, os dois pontos de controle na ligação. O que estamos procurando é uma curva que vai começar aqui, e então vai girar e ser puxado pelos dois pontos de controle e a curva de volta para os pontos finais no canto superior direito. Assim como com a curva quadrática, vamos mover a caneta para a posição inicial. Temos CTX.moveTo, e o ponto de partida foi 150, e em vez de QuadraticCurveTo, usamos BezierCurveTo para desenhar a linha. Temos os nossos pontos de partida aqui. Então vamos adicionar o ponto de controle número 1 primeiro, que é 100, 250 no x e y, e depois o ponto de controle 2, que é x, 500, e então y, 250, e, por último, adicionamos os pontos finais, que é o nosso 500 por 50. Em seguida, adicionaremos o traçado para finalmente desenhar a linha na tela. Assim como antes, podemos mover os pontos de controle para criar diferentes estilos de linha e nos dar qualquer tipo de curva que queremos usar. Claro, você também pode usar preenchimento em vez traçado para preencher a curva com a cor de fundo. Então mude de volta para acidente vascular cerebral. É isso. Espero que isso faça sentido, e é assim que podemos usar curvas bézier e quadráticas com a tela. Vejo você no próximo vídeo. Vamos dar uma olhada em usar os métodos de salvar e restaurar. 16. Dando um passo adiante: salvar e restaurar: Bem-vindos de volta, rapazes. Neste vídeo, vamos dar uma olhada em uma característica interessante da tela, que é os métodos de salvar e restaurar. Vamos criar um novo painel para demonstrar isso. Vamos chamar isso de salvar e restaurar, então Copie e Colar no título e vamos limpar o script, totalmente toda a seção do último vídeo. Em seguida, mude a altura da tela para 600 e então estamos prontos para ir. Lá vamos nós. Primeiro de tudo, vamos dar uma olhada em salvar no método say salva o estado atual da tela em uma pilha. O estado atual salvo inclui coisas como o estilo de traçado, a largura de qualquer estilo de linha, as linhas de base do telefone, limites poderosos e a transformação para citar alguns. Vamos começar criando dois círculos, então eu vou criar um vermelho e um verde. Eu vou criar um caminho, nós começaríamos caminho. Isto é para o primeiro círculo, então eu vou adicionar um fillStyle igual a verde e, em seguida, desenhar o círculo com o método arco. A primeira posição que eu quero é 150 por 150 no x e y, um raio de 80, e então vamos criar um círculo completo com a posição inicial de zero. Então duas vezes math.pi, e então use um preenchimento, então é um círculo verde e eu estou indo apenas Copiar isso e Colá-lo em baixo vai mudar o FillStyle para o vermelho e a posição para ser 400, 150, então nós temos belos vermelhos e um belo círculo verde. Eu vou criar mais um círculo abaixo, mas desta vez sem qualquer preenchimento de cor, então vamos excluir isso e mover a posição para 150, 400. Mude o y para 400. Você percebe como este terceiro círculo, mesmo que não tenhamos um FillStyle, herdou a cor vermelha do círculo anterior. Tudo bem, se é isso que queremos. Mas também podemos usar salvar e restaurar em certos pontos para mudanças. Por exemplo, podemos salvar o estado da tela após o primeiro círculo e , em seguida, usar o método de restauração pouco antes criar o terceiro círculo para dar-lhe a cor de verde. Logo após o bloco de código para o primeiro círculo verde, vamos adicionar ctx.save e assim sabemos o que estamos fazendo. Vamos apenas adicionar um comentário, então isso irá salvar o preenchimento verde e, em seguida, para criar o preenchimento verde no terceiro círculo, podemos adicionar ctx.restore. Basta dobrar o terceiro círculo é desenhado. Lá vamos nós. Então isso restaura a cor dos círculos para ser verde assim como o primeiro. Também podemos continuar com vários pontos de salvamento e restauração. Vou criar um quarto círculo, não o fundo. Desta vez, o x é 400, o y é 400, e o resto pode permanecer o mesmo. Temos um ponto seguro para o campo verde, então vamos adicionar um ponto seguro também para a cor vermelha. Vamos fazer mais uma gravação e um comentário para que isso salve o preenchimento vermelho. Então você sabe, é que algo acabou de acontecer lá. Depois de criarmos um segundo salvamento, salvamos o preenchimento vermelho, o círculo verde que restauramos para você antes é revertido para vermelho. Vamos comentar isso para C, para que fique verde. Em seguida, adicionamos o salvamento e, em seguida, ele muda de vermelho. A razão pela qual isso acontece é porque você mencionou no início deste vídeo que cada vez que criamos um salvamento é adicionado à pilha, então nós vamos primeiro salvar, que é um greenfield, seria então salvo na pilha um preenchimento vermelho e como fizemos o método de restauração apenas uma vez, ele volta para o último cofre, que é o preenchimento vermelho. Se, então, queremos reverter mais um salvar de volta para o greenfield, precisamos fazer uma segunda restauração, então ctx.restore. Agora isso para restaurar de volta o verde apenas removerá o FillStyle. Isso deve ficar verde, o que acontece. Vamos adicionar alguns comentários nisso, então porque esta é a primeira restauração, isso recupera o último salvamento e o último salvamento foi o preenchimento vermelho. Então, abaixo, temos a segunda restauração, que recupera o segundo último salvamento da pilha, e a segunda última cor, que você salvou foi o preenchimento verde original. Eles vão, espero que isso faça sentido. Ao usar salvar e restaurar, tudo depende da ordem em que criamos os salvos. Então precisamos restaurar em uma ordem específica para ter certeza de que recuperamos o salvamento particular que queremos reutilizar. Obrigado e vamos passar agora para o próximo vídeo onde vamos dar uma olhada em como dimensionar, girar e traduzir. 17. Dando um passo adiante: ampliar, rotacionar e traduzir: Bem-vindos de volta a todos. Vamos começar com a criação em nossa nova caneta para este vídeo, que é chamado de escala, rotação e tradução. Então vamos apenas mudar o título para ser escala, girar e traduzir. Então vamos criar nosso modelo de esqueleto. Para reutilizar dará a função, as duas variáveis e todo o resto pode ser excluído. Lá vamos nós. Então, este vídeo é sobre a aplicação de transformações em nossos desenhos em Canvas. Neste vídeo, vamos analisar a escala, a rotação e a tradução. Então, primeiro, queremos começar criando um retângulo simples para manipular. Então vamos desenhar um retângulo com um estilo de preenchimento. Vou fazer o meu roxo. Em seguida, desenhe para a tela com FillRct. Assim, o canto superior esquerdo é 0, 0, 300 no x e 200 no y. Então, apenas um simples retângulo preenchido. Vou começar adicionando o método de tradução, e isso move os pontos de referência de x e y para um local diferente. Então vamos adicionar ctx à nossa tradução. Ele leva em dois parâmetros, que é o valor x para começar. Vamos adicionar o valor y de 100. Para podermos ver o que isso acabou de fazer. Nós traduzimos os pontos de referência, que era originalmente 0, 0 no canto superior. Em seguida, movemos o ponto de referência para ser 100 e 100 para baixo no eixo y. Nós também podemos girar nosso triângulo ou girar nosso desenho usando o método girar. Usando girar, o valor padrão, que estamos em, é em radianos em vez de graus. Então, para converter em graus, precisamos multiplicar os graus por maf.pi dividido por 180. mesmo valor que tínhamos no início, como 45, será então em graus. Isso girará o retângulo em 45 graus. Só temos que ter cuidado ao usar traduzir e girar os dois juntos. Precisamos adicionar traduzir primeiro. Porque se não o fizermos, os pontos de rotação são a origem Canvas, que é o canto superior esquerdo. Então, certifique-se de que estes dois são aplicados na ordem correta. Então eu vou apenas comentar a rotação e eu vou passar a escalar nossos desenhos. Assim, você pode dimensioná-los para serem maiores ou menores. Para fazer isso, vou criar mais um retângulo. Então eu vou apenas copiar esta seção e, em seguida, colar o segundo triângulo. Então, o estilo de preenchimento, eu vou definir o meu para laranja. Em seguida, para afastá-lo, vamos adicionar uma tradução. Então o x de 100 e o valor y de 300. Então temos os dois retângulos desenhados para a tela com diferentes localizações traduzidas. Vamos usar o método de escala para aplicar alguma escala para o segundo retângulo. Então usamos o ctx.scalemethod. Isso leva em dois parâmetros. Então a largura e a altura. Então, se quiséssemos dimensionar o desenho para ser metade de seu tamanho atual, ou 50%, usaria 0,5 em x e y. Isso faz com que nosso retângulo seja metade do tamanho que tinha antes. Claro, um seria 100% seu tamanho original. Se quiséssemos fazer o dobro do tamanho, poderíamos mudar isso para dois ou 1,5, para 150 por cento e assim por diante. Um olhar tão básico sobre a aplicação de transformações. No próximo vídeo, vamos aproveitar o que vimos neste vídeo, observando como usar o método de transformação, a transformação início. Então nos vemos lá. 18. Dando um passo adiante: transformações de tela: No último vídeo, analisamos alguns métodos de transformação como: traduzir, girar e como dimensionar nossos objetos. Neste vídeo, vamos seguir em frente e dar uma olhada em como podemos aplicar todas essas transformações em um único método. Em particular, vamos dar uma olhada no método de transformação e set transform. Vamos criar nossa nova caneta para fazer isso em. Este é chamado de transformações. Podemos deixar o tamanho da tela exatamente como ela é. Na verdade, vamos deixar o primeiro retângulo, que é o roxo. Devemos nos livrar do exemplo laranja, e vamos começar a trabalhar com este triângulo. Eu comentei para fora girar, e quero fazer o mesmo para traduzir. Você vai ver por que esses dois são deixados dentro, em apenas um momento. Este restaura nosso retângulo para estar nas coordenadas originais no canto superior esquerdo. Primeiro queremos dar uma olhada no uso do método transform, então ctx.transform. Isso pode ficar bastante complicado. Eu só vou adicionar um comentário acima para mostrar todos os parâmetros que podemos usar, então o intervalo de seis. O primeiro é o dimensionamento horizontal. O segundo é a inclinação horizontal. O número primitivo 3 é inclinação vertical. Então o número 4 é escalonamento vertical. Só faltam mais dois, o número 5 é traduzir ou mover horizontalmente. O último, que é o número 6, é traduzir verticalmente. Há muito a ter em conta lá. Em primeiro lugar, vamos dar uma olhada nos parâmetros que já conhecemos, que usamos no último vídeo e estes são dimensionados e traduzidos. Vamos adicionar estes dentro do método de transformação. Primeiro de tudo, vejamos a escala. O primeiro parâmetro é o dimensionamento horizontal. Vou definir isso para ser um, que é o equivalente a 100 por cento. Assim como no último vídeo, 0,5 é 50 por cento e assim por diante. É dado por agora, então vamos definir isso para zero. O mesmo com a inclinação vertical. O quarto parâmetro é o dimensionamento vertical. Vou definir isso de novo para um ou 100 por cento. Então o número 5 e 6 é traduzir no eixo x e y. Vamos apenas mantê-lo simples e vamos traduzi-lo no eixo x, 50 pixels e zero no y, e salvar isso. Lá está o nosso retângulo retornado. Ele foi retornado do mesmo tamanho porque nós definimos a escala no x e y para ser 100%. Eu posso fazer isso um pouco maior, apenas assim. Em vez de a posição inicial estar no canto superior esquerdo de zero, nós nos movemos através de 50 pixels no eixo x, e deixamos em zero no eixo y, então ele ainda está no topo. Os únicos parâmetros que ainda não olhamos são a inclinação horizontal e vertical. Vamos aplicar alguns desses valores agora. Comece com inclinação horizontal e vejamos o efeito que isso tem. Vamos começar com 0,2. Vamos aumentar isso. 0.5, e você começa a idéia para que eu possa continuar aumentando isso. Vamos tentar um, e podemos ir ainda mais longe, não paramos em um, e assim por diante. Vamos mudar a inclinação vertical agora. Novamente, vamos começar com 0.2. e devemos obter uma inclinação na direção vertical em vez de horizontalmente. Vamos dar uma olhada em 0,5. Podemos usar isso para fazer algumas formas interessantes. Vamos tentar um. Lá vamos nós. Isso é útil se quisermos aplicar poucas transformações para a mesma forma. Vou mudá-lo de volta para zero e voltar ao nosso retângulo original. Ao usar os métodos de tradução, não apenas as transformações que definimos dentro dos parâmetros aplicados, mas também leva em conta quaisquer transformações como escala e tradução, que já foram declaradas anteriormente. Isto é o que chamamos de adicionar na matriz de transformação. Usando o método de transformação, movemos a tradução horizontalmente em 50 pixels. Se descomentar os tradutores que definimos anteriormente. No eixo x temos a tradução de 100 pixels, então devemos obter os 100 pixels, adicioná-lo dos 50. Se nós apenas descomentar os tradutores, o que nós fazemos. Isso é movido mais de 150 pixels e nós também temos os 100 pixels no eixo y. Basta ter em mente que tudo o que está a ser aplicado antes desta transformação também será levado em consideração. Mas e se quiséssemos que nossa transformação ignorasse quaisquer transformações anteriores ou redefinisse efetivamente a matriz de transformação. Então este é o momento em que podemos tirar proveito do método set transform. Set transform redefine a transformação atual antes de aplicar quaisquer transformações que definimos. Para fazer isso, tudo o que precisamos fazer é mudar a transformação para ser definido transformar. Você percebe como a tradução que definimos no topo agora foi ignorada, deixando apenas os parâmetros que definimos para serem aplicados ao retângulo. É assim que podemos traduzir, dimensionar e inclinar usando o método de transformação. A principal coisa a lembrar é quando se usa transformação, sempre levará em consideração quaisquer transformações anteriores. No entanto, se definirmos que a transformação seja definida, quaisquer transformações anteriores serão ignoradas, deixando apenas as que estão entre parênteses a serem aplicadas. Obrigado por assistir e te vejo no próximo vídeo. Vamos dar uma olhada em trabalhar com pixels. 19. Dando um passo adiante: trabalhando com pixels: Neste vídeo, vamos passar das transformações, vou dar uma olhada em trabalhar com pixels. Eu fui em frente e criei uma nova caneta, dentro da CodePen chamada trabalhar com pixels. Nós mudamos a altura da tela de volta para 300 porque esse é todo o espaço que precisamos, e também removemos qualquer uma das transformações do último vídeo. Fotos digitais ou imagens de ferrugem são feitas de pixels, e as cores são feitas de uma combinação de vermelho, verde e azul para criar qualquer cor imaginável. Muitas vezes, as fotos também podem ter um canal de queda, que é chamado de canal Alpha e isso representa o valor de transparência. Para este vídeo, vamos manipular os valores desses quatro canais para criar efeitos como fazer uma imagem colorida em tons de cinza. Para este vídeo, vamos manipular os valores desses quatro canais para criar diferentes cores e efeitos. Esses efeitos podem ser usados para fazer coisas como fazer a escala de cinza da imagem, ou preto e branco, e essas são técnicas semelhantes usadas no software de edição de imagem, como o Photoshop. Primeiro vamos dar uma olhada em CreateImageData, queremos parar isso dentro de uma variável chamada ImageData. Defina como CTX.CreateImageData, e para isso vamos simplesmente passar em um tamanho da imagem que você deseja criar. Eu vou fazer o meu 400 pixels de largura por 200 pixels de altura, e isso cria um objetos ImageData em branco. Novo objeto ImageData leva em parâmetros como uma largura, uma altura e também o ImageData. Em seguida, vamos criar um JavaScript para loop, e isso é para que possamos percorrer todos os valores dentro dos objetos ImageData. Os valores nos quais estamos interessados são os dados de pixel, porque criamos uma área de 400 por 200 mas um pixels mais baixos para trabalhar, e cada pixel tem quatro cores diferentes, ou para canais diferentes que é o vermelho, Verde, azul e Alpha. Ao usar o CodePen, pode ser muito fácil esmagar o navegador. Eu só vou comentar o loop, ou nós realmente digitalizamos para fora, para que isso não cause nenhum problema. Então i é igual a 0; um i é menor que ImageData.Data.Length; i mais é igual a 4. Vamos dar uma olhada no que temos, criamos um loop for, e um loop for continuará percorrendo todos os dados por uma certa quantidade de vezes. Os dados que queremos fazer loop através, é o ImageData que acabamos de criar, e data.length é o comprimento da matriz ou o número de pixels, que está contido em uma seção de 400 por 200 pixels. Porque cada pixel tem os quatro valores ou os quatro canais que falamos, que eram o vermelho, verde, azul e Alpha. Vamos então incrementar o loop em quatro cada vez, e então esses quatro valores individuais poderiam ser manipulados dentro do loop um por um. Vamos fazer isso agora, selecione o ImageData.data e, em seguida, dentro de colchetes, podemos selecionar o pixel individual. Nós criamos a variável de i, i mais 0 vai ser o primeiro canal, e este é o valor vermelho eo valor está entre 0 e 255. Vamos copiar isso mais três vezes para criar os quatro canais diferentes. Este vai ser o canal verde, que é i mais 1, e então i mais 2 é para o canal azul, e então i mais 3, e este é o Alpha ou a transparência. 0 é totalmente transparente e 255 é uma cor sólida. Se isso parecer um pouco confuso até a maturidade ainda, vamos dar uma olhada em todos os dados dentro do console e todos devem ficar claros. Os novos valores de pixel de objetos são blocos transparentes por padrão, e este é um valor RGBA de zero. Eu só vou mudar para ser uma cor verde. Vou definir os vermelhos como 0, e o verde como o valor máximo de 255, o azul como 0 e a transparência. Para torná-lo uma cor sólida, vamos fazer que 255. Então, finalmente, para colocar o ImageData na tela, use Ctx.Putimagedata. O ImageData que queremos adicionar é a variável de ImageData, e a posição é 0, 0. Agora podemos descomentar o loop for para executar isso, então salve isso. Há nossa imagem que é 400 pixels por 200 pixels, com um loop através de todas as cores individuais e alterar a cor preta padrão para ser esta cor verde, que nós definimos aqui. Para obter uma melhor compreensão do que está acontecendo lá, eu vou apenas fazer um console.log e a informação que queremos olhar é o ImageData. Temos um log de console, vamos clicar com o botão direito do mouse e ir para Inspeções e, em seguida, se selecionarmos a guia Console, há nosso objeto ImageData que criamos. Então vamos abrir isso, eu clico na pequena seta ali. Nós temos os dados e estes são os dados que estarão em acessar dentro do loop. Eu também tenho uma largura e altura que ajustamos para 400 por 200. Se abrirmos os dados, então encontramos muitos dados mantidos lá, e estes são todos os dados de pixel que estão contidos nesta área de 400 por 200, e todos eles são seccionados em grupos de 10.000. Acabei de abrir um menu suspenso, há dados de pixel 0-99. Temos feito um loop em quatro pixels de cada vez, 0, 1, 2, 3, 4, estes são os quatro valores de cor para um pixel. Então o número 4, 5, 6 e 7 é o segundo pixel. É por isso que saltamos o loop por quatro cada vez para que nos movamos para o segundo conjunto de pixels, o primeiro conjunto de pixels e assim por diante. É 0, 255, 0, 255 para cada pixel, e estes são os dados que definimos no loop. Podemos mudar isso rapidamente, e apenas verificar os valores como sendo refletidos. Por exemplo, podemos mudar o vermelho para 10, e vamos salvar isso e, em seguida, atualizar a página, abrir o ImageData e, em seguida, voltar para a primeira seção. Novamente, há o nosso primeiro pixel, é 10, 255, 0, 255, e então vamos loop de volta através do segundo pixel, e assim por diante. É assim que podemos manipular os quatro valores de pixel do RGBA, vamos apenas fechar. É assim que podemos usar CreateImageData. O último método que eu quero mostrar neste vídeo é GetimageData, e podemos usar o método GetImageData para descobrir os dados de pixel para a área da tela. Por exemplo, se quiséssemos saber os dados de pixel 400 pixels por 100 pixels quadrados, podemos descobrir isso. Vamos adicionar isso à parte inferior, vou apenas comentar este console sair primeiro. Vamos fazer ctx.GetimageData e , em seguida, especificar a posição inicial que deseja agarrar. Se quisermos pegar uma área no canto superior esquerdo, definimos a posição de parada de 0, 0. Vamos definir a área que queremos pegar para 100 por 100. Podemos registrar isso para o console e, em seguida, cercar esta seção com colchetes e, em seguida, atualizar. Se entrarmos nas ferramentas de desenvolvedor agora clicando em Inspecionar e, em seguida, vá para o Console e confira o ImageData. Podemos ver imediatamente que há muito menos dados de pixel nas paredes para o último registro do console quando olhamos para a seção completa. Como estamos apenas verificando uma pequena área no canto superior, temos muito menos ImageData dentro do console, e é claro que ainda podemos abrir cada um deles e ver os dados individuais. É assim que podemos trabalhar com pixels na tela, e eu vou vê-lo no próximo vídeo. 20. Introdução do desafio: convertendo imagens para uma escala de cinza: Então, agora temos uma melhor compreensão de como trabalhar com pixels usando o Canvas, e agora eu gostaria de definir um desafio para você ter uma chance. Esse desafio é pegar uma imagem colorida e convertê-la em tons de cinza, ou preto e branco, eu realmente gostaria que você desse um jeito antes passar para a solução no próximo vídeo. Mas antes de eu deixar você ir em frente e dar uma chance, há apenas uma ou duas coisinhas que eu gostaria de mostrar primeiro, só para ajudá-lo. O primeiro é realmente como fazer uma imagem em tons de cinza. No último vídeo, usamos um loop for, e pegamos todos os dados de pixel da tela. Uma vez que você encontrou uma imagem para colocar na tela, usando a imagem draw eu vou então gostar que você crie um loop for de forma semelhante a esta, embora nós só precisamos dos canais vermelho, verde e azul. A maneira como podemos criar um efeito de escala de cinza na imagem é definir o valor do canal vermelho, verde e azul para ser a média de todos os três. Uma maneira de fazer isso é criar uma variável e adicionar os três valores juntos, e, em seguida, dividi-la por três, e definir os três canais para ser o equivalente ao valor médio. Outra coisa importante que eu gostaria de salientar, que pode causar alguns problemas ao longo do caminho é que precisamos usar o método get ImageData para o desafio. Ao usar este método, ele requer que a imagem, bem como o código que a executa, esteja no mesmo domínio do servidor web. Como não temos acesso ao servidor, porque estamos usando CodePen, precisamos adicionar um atributo especial à imagem chamada origem cruzada, e isso nos permite usar uma imagem de uma fonte diferente em nossa demonstração sem lançar quaisquer erros. Se você quiser saber mais sobre o atributo de origem cruzada, você pode ir para este link na tela agora. Caso contrário, mostrarei a linha de código que você precisará adicionar ao criar a imagem. A linha de código que você precisa adicionar, primeiro vou selecionar uma variável de imagem. Se o seu valioso para carregar uma imagem é um nome diferente, claro que mudar isso. Em seguida, cruzar a origem, e eu vou definir o meu igual a anônimo. Então, se você adicionar esta linha de código em pouco antes de adicionar a fonte da imagem, você deve estar pronto para ir. Saiba também se você trabalha junto com um editor de texto em vez de usar o CodePen, você também pode ter o mesmo problema em determinados navegadores, como o Google Chrome ao usar as configurações padrão. Uma solução alternativa para isso é usar um host local, como MMP, para servir seu projeto. Ou eu também encontrei o navegador Firefox funciona sem quaisquer problemas, então eu deixo isso com você para ter um ir. Se ficares preso, não te preocupes, passa para o próximo vídeo e eu mostro-te a minha solução. 21. Desafio: convertendo imagens para uma escala de cinza: Oi caras. Espero que você tenha conseguido completar o desafio ou espero que pelo menos você tenha dado um objetivo. Se você teve algum problema, não se preocupe, eu vou te mostrar uma solução de trabalho. Vamos em frente e criar uma nova caneta. Vou chamar isso de desafio: imagem em escala de cinza. Vou criar uma tela maior do que antes, só porque você vai adicionar uma imagem lá, que provavelmente será maior do que 600 por 300. Então vamos esvaziar os roteiros. Vamos começar com uma tag de script limpa. Do topo eu vou criar nossas duas variáveis. Primeiro de tudo é uma variável de tela, que, como de costume, é document.getElementById. Claro que o ID é myCanvas, e em seguida a variável de contexto, que vemos como ctx. Vamos manter isso consistente. O contexto é equivalente a Canvas.getContext. Agora estou usando o contexto 2D. A primeira coisa que vou fazer é criar uma imagem. Esta será uma imagem colorida que poderemos trabalhar mais tarde com os pixels e transformá-la em escala de cinza. Espero que tenha chegado até aqui, pelo menos, e tenha conseguido adicionar uma imagem à tela. Imagem variável é igual a uma nova imagem. Uma vez que esta imagem tenha carregado com image.onload, vamos acionar uma função. Esta função vai primeiro desenhar a imagem para a tela, e então uma segunda coisa que queremos fazer é acionar uma segunda função, que eu vou chamar de escala de cinza. Primeiro de tudo vamos desenhar a imagem para a tela, com CTX.DrawImage. Ainda não criamos a fonte da imagem, mas vamos apenas colocar a variável de imagem dentro dela. Vamos começar a posição em 0, 0, que é o canto superior esquerdo. Em seguida, a image.src, que é o caminho do arquivo. Vamos à Wikipédia. Vou pegar uma imagem de lá para usar. Este não vai ser bom, é preto e branco para começar. Vamos encontrar uma imagem adequada. Vamos tentar o conteúdo em destaque. Este está bem. Em seguida, clique com o botão direito do mouse e copie o endereço da imagem e cole dentro da fonte Há uma imagem aparecendo na tela, que está tudo funcionando bem. Então o que eu fiz a seguir foi criar uma função em escala de cinza. Nós vamos criar isso em apenas um momento, mas antes de tudo eu vou chamá-lo dentro desta função. Basta digitar escala de cinza e, em seguida, os colchetes. Isso chamará a função de escala de cinza uma vez que a imagem é carregada. Agora vamos criar esta função em escala de cinza. O que esta função fazer, é antes de tudo gostaríamos de pegar os dados da imagem, que é basicamente o tamanho total da tela. Queremos pegar toda a área. Em seguida, queremos executar o loop for, de forma semelhante ao último vídeo onde percorremos todos os dados de pixel. Assim como mencionado na introdução, vamos medir os canais vermelho, verde e azul para nos dar um efeito de escala de cinza. A última coisa que eu quero que a função de escala de cinza faça, é colocar a matriz de pixels modificada ou os pixels preto e branco de volta na tela, aproveitando o método put image data. Vamos começar criando uma variável de dados de imagem.Isso é equivalente a ctx.GetimageData. Vamos começar no canto superior esquerdo da tela, e então vamos pegar toda a largura da tela, e também a altura da tela. Isso vai armazenar os dados para a imagem. Vou criar mais uma variável, simplesmente chamada de dados. Eu quero definir isso para ser ImageData.data. Nós não temos que criar esta variável, a única razão que eu fiz isso é porque nós usamos ImageData.data bastante ao usar o loop for. É apenas um pouco mais curto armazenando dentro de uma variável de dados. Então estamos prontos para criar o nosso loop for. O loop for pode ser o mesmo que o do último vídeo, onde analisamos a modificação de pixels. Vamos definir a variável i para ser 0 para começar com, e vamos manter o loop indo enquanto i é menor que dados, que é esta variável aqui, .length. Esta variável de dados é apenas uma versão curta de escrever ImageData.Data.Length. Então i mais ou igual a 4. Se você se lembrar, isso é porque cada pixel tem quatro canais. Antes de começarmos a modificar os canais individuais vermelho, verde e azul, vou criar uma variável chamada média. Este será o valor médio do canal vermelho, verde e azul. Vamos definir isto igual a dados e colchetes i. Este é o primeiro canal que é vermelho, o adicionar isto ao verde, e azul. Dados i mais 1 e, em seguida, dados i mais 2. Este é o vermelho, verde e azul. Adicione todos os três valores juntos e, em seguida, divida-o por 3 para obter a média. Vamos começar com o valor vermelho. Os dados sobre o primeiro são i, se você se lembrar do último vídeo, definimos esse valor para estar entre 0-255. Mas desta vez vamos apenas configurá-lo para a variável média. Então vamos fazer isso mais duas vezes, pelo verde e pelo azul. Eu mais 1 e i mais 2, e depois movendo para baixo. Certifique-se de que isto está fora do circuito agora. Precisamos colocar esses dados de imagem de volta na tela, com ctx.putimagedata. Os dados que queremos puxar de volta para a tela é esta variável de dados de imagem. Na posição, é o canto superior esquerdo, que é 0, 0, e, em seguida, salve isso. Você percebe que depois de fazer isso ainda não temos nenhuma mudança na tela. Se você se lembra antes, mencionamos que precisamos adicionar uma linha de código, que era os atributos de origem cruzada. Vamos adicionar isso no topo agora. Image.Crossorigin. Vou definir isto para anónimo e depois guardar isso. Você pode ver instantaneamente o efeito ocorreu. Esta linha de código nos permitiu usar uma imagem de uma fonte diferente sem lançar nenhum erro. Vamos expandir isso para que você possa ver. Se comentarmos os dados da imagem put, devemos obter a imagem colorida original de volta que fazemos. Se você quiser trabalhar com quaisquer efeitos diferentes, em vez de ter todos os três canais definidos para a média, você pode alterar isso para ser qualquer coisa entre 0-255, e você pode ver o efeito lá. Essa é uma maneira de concluir esse desafio e, claro, há muitas maneiras diferentes de fazer isso. Mas o principal é dar-lhe um objetivo e tentar aprender com quaisquer erros. Com o desafio completo agora, vamos agora passar para o próximo vídeo e vamos dar uma olhada melhor no loop. 22. Dando um passo adiante: criando loops: Espero que tenha gostado do último desafio e bem-vindo de volta. Vamos dar uma olhada melhor no loop. Vou mostrar-lhe como podemos criar um efeito semelhante a este usando for-loops, o método de tradução e também girar. Este é o resultado final que estamos procurando alcançar e é basicamente um arco vermelho ou um círculo vermelho que é o fundo. Então vamos criar um segmento, que é a seção do triângulo preto. Vamos desenhar isso para a tela, e então usar um for-loop para percorrer todo o caminho e continuar desenhando os segmentos até voltarmos ao início. Cada vez que usamos girar e traduzir para garantir que o novo segmento desenhado está na posição correta. Vamos para a CodePen. Em vez de usar os modelos de desafio, vou folclar o trabalho com Pixel Video, só assim temos um modelo para trabalhar. Vamos chamar isso de Looping. Então você quer mudar a tela para ser 600 por 600 para começar, e então vamos limpar tudo, exceto as duas variáveis no topo e também a função onload. Lá vamos nós. Estamos prontos para ir agora. O que eu vou começar com é o círculo de fundo vermelho usando o método arco. Vamos fazer o meu ser vermelho. Temos CTX.fillStyle para ser igual a vermelho e criar o arco e isso vai ser um círculo completo. As coordenadas iniciais não se importarão de estar no meio da tela. Eu vou usar tela.largura dividida por 2 para o ponto central, e depois tela.altura dividir por 2 para começar nosso arco no centro da tela. O raio que queremos fazer com que seja 230. A posição inicial zero, e para criar o círculo completo, é 2 vezes Math.pi. Em seguida, vamos preencher automaticamente para desenhar isso para a tela de desenho. Simplesmente assim. Isso não é desenhado, então deve haver um erro de digitação em algum lugar. Ali mesmo, que é a altura da tela. Bom. Agora temos o círculo de fundo vermelho. Então podemos começar a trabalhar no desenho dos segmentos pretos que queremos fazer loop. Vamos criar uma função para fazer isso. Vou chamar meus segmentos de desenho de função e, em seguida, o código entre as chaves. Vamos começar com BeginPath e, em seguida, usamos Ctx.moveTo. Quer se mover para o centro da tela, então usamos largura e altura da tela dividida por 2 para nos dar os pontos de partida. Agora vamos definir o estilo de preenchimento para ser preto. Para desenhar os segmentos ou para criar segmentos, vamos usar um arco. Este aqui para estar no centro da tela. Vamos adicionar isso aí. O raio que queremos torná-lo 230, que é o mesmo que um fundo. Então precisamos definir o ponto inicial e final para cada uma das seções. O ponto de partida será a posição das 12 horas. Então isso é 1.5 multiplicado por Math.pi. Isso é bastante simples. O ângulo final leva um pouco mais de pensar. Temos 12 seções diferentes no círculo. Temos as seis seções pretas e as seis seções vermelhas. Uma rotação completa do arco é 2 vezes Math.pi. Podemos dividir esses dois, que é um círculo completo a ser dividido pelas 12 seções e isso nos dá um volume de 0,16666, e então podemos adicionar esse valor ao 1.5 original. Vamos da posição das 12 horas, e então vamos um pouco mais longe para criar os segmentos. Então 0,16 mais 1,5 nos dá o valor de 1,6666 multiplicado por Math.pi, e isso deve nos dar nossos segmentos. Então precisamos preencher os segmentos com o método de preenchimento para desenhar na tela. Então vamos chamar uma função, logo abaixo. Desenhe nossos segmentos, e eles devem adicionar os segmentos. Lá vamos nós, diz o primeiro que precisamos adicionar. O ponto de partida é esta linha aqui, que é 1,5 vezes Math.pi. Quando adicionado a esse valor, 0,106, que é um duodécimo do raio da tela, que é o ponto final apenas aqui. Essa é a nossa primeira seção desenhada para a tela. Em vez de digitar todo esse código uma e outra vez, uma maneira mais simples de fazer isso é usar um for-loop. Vamos cercar toda a função com um for-loop. Vamos começar apenas com a linha de função e, em seguida, terminá-lo após desenhar segmentos. Vou apenas recuar a seção. Esse é o for-loop básico, e para evitar esmagar o navegador, vamos deixar o for-loop vazio por enquanto. Mas podemos ir em frente e adicionar a tradução e girar, o que você deseja ser executado em cada loop. Abaixo de segmentos de desenho, e ainda dentro do loop vamos adicionar um método de tradução, ctx.translate. Vou traduzir para o centro da tela para cada rotação. Se não usarmos traduzir primeiro, o ponto de rotação é a origem da tela, que é o canto superior esquerdo. Certifique-se de adicionar esta tela.largura e lona.altura dividida por 2. Então nós realmente queremos que o segmento seja girado. Eu quero que isso seja girado em 60 graus em cada loop. Lembre-se de que o uso de rotação está em radianos, então, para converter em graus, multiplicamos o valor pela divisão Math.pi por 180. Então, por último, precisamos chamar traduzir novamente para restabelecer a posição de volta à origem. Queremos traduzir isto em 300 negativos, e traduz a origem de volta para 00. Então, toda vez que chamamos isso de tradução, não temos nenhum problema. Agora podemos ir em frente e criar o resto do for-loop. Eu só estou indo para [inaudível] o for-loop ou nós adicionamos as condições para que não acabemos causando uma queda dentro da CodePen. Primeiro de tudo, vamos criar nossa variável de i igual a zero, então este é o ponto inicial do loop. Nós já temos um segmento desenhado para a tela a partir da função original. Vamos repetir isso mais cinco vezes usando i é menor que seis. Em seguida, para incrementar esta vez em cada loop, usamos i plus. Podemos ir em frente e [inaudível] este for-loop, e então podemos correr. Aí temos. Então isso funciona exatamente como queremos. Assim como uma recapitulação rápida, criamos um círculo de fundo vermelho usando o método arco. Nós então chamamos uma função chamada desenhar segmentos, e então esta função desenhou uma seção preta na tela. Em seguida, cercamos a função com um for-loop para repetir a seção preta mais cinco vezes, e em cada rotação giramos o segmento em 60 graus, e também em cada rotação, traduzimos a origem da tela de volta ao centro em vez da posição padrão no canto superior esquerdo. Depois de cada rotação, traduzimos de volta para que não tenhamos problemas. Esse é outro pequeno olhar em loop com a tela. Volte no próximo vídeo, onde vamos pegar o que acabamos de desenhar e adicionar alguns efeitos de animação. 23. Dando um passo adiante: animação: Bem-vindos de volta, rapazes. No último vídeo, criamos este bloco e padrão vermelho, que você pode ver no lado direito. Conseguimos isso criando um fundo vermelho, e então usamos um loop for para desenhar os segmentos do bloco e então nós rodamos e repetimos seis vezes. Neste vídeo, vamos dar um passo adiante e dar uma olhada na animação. Em particular, vamos dar uma olhada no método de intervalo definido, que vai girar aberto, e os resultados finais seriam algo parecido com isso. Não é tão difícil criar esse efeito ao usar o intervalo definido. Vamos começar criando sua própria caneta. Para o último vídeo, e eu vou chamar isso de animação, exatamente assim. Podemos reutilizar todo o código do último vídeo. O que basicamente vamos fazer é envolver todo o código existente dentro de uma função e, em seguida, passar esta função para o método de intervalo definido em um atraso de tempo especificado. Para começar, precisamos envolver o código existente dentro de uma função. Logo abaixo da nossa variável de contatos, crie uma função, e isso você vai chamar girar. Então precisamos adicionar as chaves, então adicione a chave de abertura. Em seguida, na parte inferior, podemos adicionar a chave de fecho, aqui mesmo. Estou de volta ao topo. Nós só precisamos adicionar uma ou duas linhas dentro desta função apenas para fazê-lo funcionar corretamente. A primeira coisa que precisamos fazer é criar os pontos de referência no centro do Canvas. Vamos usar ctx.translate. Tudo o que queremos fazer é traduzir para o centro da tela, assim como fizemos muitas vezes antes. Vamos adicionar estes dentro dos suportes. Agora temos o ponto de referência no centro da tela. Em seguida, queremos criar um método de rotação. Vamos girar em um grau cada vez que um método de intervalo definido é chamado. Vamos apenas adicionar Math.Pi dividido por 180, e isso é o equivalente a um grau. Então, assim como fizemos no último vídeo onde traduzimos, giramos e depois traduzimos de volta para a origem, precisamos adicionar uma segunda tradução para traduzir de volta à origem em cada rotação. Podemos fazer o mesmo que o primeiro, mas em vez disso, podemos usar negativo apenas para que voltemos à origem. Isso traduz no topo, pode então mover para a posição correta. Vou apenas recuar este código assim. Em seguida, para fazer isso realmente funcionar, também realmente causar a rotação logo acima da última chave, que é para a função girar. Precisamos adicionar intervalo definido e, em seguida, leva em dois parâmetros. O primeiro é a função girar, que será criada. Você pode ver que vai muito mais rápido. O segundo parâmetro é o atraso de tempo especificado em milissegundos. Vamos mudar isso para 30, e podemos abrandar um pouco. Claro que isso pode ser alterado para você e se você quiser, você prefere. Mudar para 300 faz com que seja muito lento, então vamos mudar por aí. Na verdade, é bastante simples criar animação usando intervalo definido. Apenas para recapitular, usamos o desenho do último vídeo e cercá-lo dentro de uma função de rotação. Adicionamos uma, duas linhas de código. Começamos com o método de tradução, que se certificou de que o ponto de referência estava no centro do Canvas. Em seguida, giramos em um grau, cada intervalo definido de tempo é chamado, e então nós nos certificamos de que nós traduzimos de volta para a origem ele não causasse nenhum problema toda vez que nós nos movemos para o centro. Em seguida, passamos na função de rotação para definir intervalo e, em seguida, parar de ir de real rápido. Adicionamos 30 milissegundos de atraso apenas para abrandar as coisas, assim. É assim que podemos usar intervalo definido para criar uma animação. Agora vamos passar para o projeto final, ou nos divertir um pouco desenhando uma cara de mouse mickey. Te vejo lá. 24. Projeto final: introdução: Então, um grande parabéns de mim por ter chegado ao final deste curso. Então, como um pouco de exercício divertido, eu gostaria de desafiá-lo a desenhar o rosto de um Mickey Mouse. Agora ele não precisa ser perfeito, toda a idéia é apenas dar-lhe algo para praticar, que envolve algumas das técnicas que analisamos ao longo deste curso e também lhe dá a chance de pensar sobre as coisas você mesmo em vez de digitar junto comigo. Então isso é o que eu inventei e isso é o que eu gostaria que você criasse. Então eu recomendaria encontrar uma imagem simples do Mickey Mouse, apenas para copiar. Então, uma pequena dica que você pode achar útil é antes de realmente desenhar as curvas para uma grande parte do rosto, você pode achar muito fácil criando alguns pequenos arcos como pontos de referência. Por exemplo, o ponto inicial e final de uma curva, e isso é o que eu faço ao criar este exemplo e ter esses pontos de referência à mão realmente torna muito mais fácil ao desenhar as curvas. Então vá em frente e passe um pouco de tempo tentando replicar isso, e não se preocupe se você lutar com qualquer um desses caminhos. Porque no próximo vídeo, vou mostrar-lhe a solução para como eu criei isso. Então boa sorte. 25. Projeto final: desenhe o Mickey Mouse!: Bem-vindos de volta a todos. Espero que você tenha tido algum sucesso com este desafio e compartilhe o que você criou, e eu adoraria vê-los. Agora vou explicar exatamente o que fiz para criar isso, caso esteja tendo problemas ao longo do caminho. A primeira coisa que eu fiz foi criar uma função chamada addReferencePoints, e esta função continha todos os pontos de referência que você pode ver no lado direito. Eu crio esses pontos de referência para tornar a vida um pouco mais fácil ao criar os arcos e também as curvas, e fora deles, a função um por um, assim como nós desenharíamos as curvas mais abaixo no código. parte inferior do lado de fora da função, esta é a chamada para a função para realmente desenhar todos os pontos de referência na tela, e a razão pela qual todos os pontos de referência estão contidos na função é para que possamos simplesmente comentar todos os a chamada para a função quando queremos removê-los, assim. Comecei criando uma largura de linha de três pixels, e depois um caminho, e então comecei a trabalhar no topo do contorno da cabeça. Usamos o método arco para desenhar o lado externo da cabeça nos pontos inicial e final, que adicionamos dentro daqui. Depois, a próxima coisa que fiz foi criar a orelha esquerda. Basta comentar esta seção. Criou um arco mais uma vez usando 2 vezes Math.pi para criar um círculo completo. Em seguida, segui para repetir para a orelha do lado direito. À medida que você passar por este projeto, você vai notar que muitas das coordenadas são simétricas. Nós temos uma linha abaixo do centro que é 300 pixels, então muitas das coordenadas são iguais no lado esquerdo, como você tem para o lado direito, então é apenas um caso de trabalhar fora um lado, e então é muito mais fácil de criar o mesmo no outro. Então começamos a nos mover para dentro do rosto. Temos a interface, que é o arco superior esquerdo e o arco superior direito. Você pode ver que eu fiz um comentário que as coordenadas que estamos nos referindo são pontos 1, 2, e 3 que está disponível dentro da função acima no topo. Criamos esses pontos primeiro e depois os adicionamos dentro do método BezierCurveTo. Próximo passo crio os pontos de referência para a bochecha esquerda e também para a bochecha direita. Eu mencionei antes sobre a linha simétrica, que é de 300 pixels ao longo do eixo x. Podemos então usar esta linha para ter certeza de que cada lado do rosto é uniforme. A bochecha esquerda tem 40 pixels menos que 300, a bochecha direita é 40 pixels maior, e isso cria um efeito simétrico. Em seguida, eu desço até o queixo. Para criar esse efeito, movemos a caneta para o local especificado, e desta vez usamos um método QuadraticCurveTo em vez de um BezierCurve, simplesmente porque um ponto de controle era suficiente para a seção, e isso é comum a todos os próximos seção. Esta parte é a curva que fica acima do nariz, e os olhos descansam no topo. Novamente, porque esta é uma linha simples, usamos uma QuadricCurve, e agora temos essa curva. Agora temos uma posição para trabalhar nos olhos, então a esquerda, no olho direito, acabamos de adicionar os próximos, e estes são os contornos. Eu usei um método de elipse, que nós ainda não olhamos neste curso, mas isso torna muito mais fácil do que tentar usar um certo tipo de curva para criar isso. Eu adicionei nos parâmetros logo acima, se você quiser dar uma olhada naqueles. Temos um centro x e y, assim como quando se usa um arco. Temos o raio x e y, então o raio é o eixo principal, e o raio y é o eixo menor. Nós também podemos adicionar uma rotação para a elipse, isto é em radianos. Nós então somos o start e EndAngle, e eles têm um parâmetro opcional no final, se quisermos que ele seja desenhado no sentido horário ou anti-horário. São os contornos dos olhos. Em seguida, usamos o mesmo método de elipse para desenhar o nariz e, em seguida, voltar para a curva quadráticaTo, para o arco para a boca. Há dois arcos diferentes que vamos criar. Uma é a parte superior da boca e depois temos a parte inferior da boca. Para adicionar algum detalhe na língua, criamos mais dois QuadraticCurvetos para dar o efeito da língua dentro da boca. Então a próxima coisa que eu fiz foi criar uma curva até o final de cada seção da boca, exatamente assim. Todos esses itens têm o efeito de traço, então adicionamos o traço, apenas na parte inferior de todos esses itens. Então precisamos começar um novo caminho, e a razão pela qual precisamos fazer isso é porque todos os elementos daqui têm um preenchimento em vez de um traço. Primeiro de tudo, temos o olho esquerdo, e novamente usamos o método de elipse, mas desta vez adicionamos um pouco de ângulo apenas para criar o efeito que estamos procurando. Em seguida, repetimos no lado direito para o olho direito, e depois desenhamos tudo para a tela com o método de filme no final. Então, por fim, adicionamos algum texto ao final apenas com as palavras do Mickey Mouse, e adicionamos alguns alinhamentos básicos e também algumas fontes e preenchimentos de cores. É assim que crio meu rosto do Mickey Mouse e me lembro do número que não há uma maneira certa ou errada de fazer isso. Todo mundo tem abordagens diferentes, mas o principal é que você consegue desenhar algo que se assemelha ao Mickey Mouse. É isso para o fim deste projeto. Por favor, compartilhe o que você criou. Obrigado por assistir e adeus por agora. 26. Obrigada: Obrigado por se juntar a mim neste curso. Espero que tenha gostado e que tenha aprendido muito com isso. Cobrimos tanto terreno, incluindo como montar o Canvas. Em seguida, analisamos scripts básicos sobre como desenhar formas como retângulos. Nós abordamos como entender as coordenadas do Canvas. Também analisamos linhas e caminhos e como era importante marchar até pixels para criar bordas de linha nítidas. Nós olhamos para várias outras técnicas, como cantos e metros, arcos e círculos. Como adicionar texto à Tela de desenho e também gradientes. Terminamos a seção básica do Canvas adicionando imagens ao Canvas e também pans e sombras. Em seguida, avançamos um pouco passando para a próxima seção, onde começamos a olhar para vários tipos diferentes de curvas, como Bézier e curvas quadráticas. Também abordamos os métodos de salvamento e instalação e como usá-los corretamente. Junto com várias transformações, como dimensionamento, rotação e tradução. Agora você deve entender como trabalhar com pixels e como acessar os dados de pixels de uma imagem e, em seguida, usar esses dados de pixel para manipular a imagem para criar efeitos, como converter uma imagem em escala de cinza. Também analisamos como Looping pode tornar os trabalhos repetitivos muito mais simples e também como animar nossos desenhos para realmente trazê-los à vida. Então espero que, no final do curso, você seja capaz de ter algum sucesso, nós desenhamos no rosto de Mickey Mouse, para colocar em prática tudo o que você aprendeu com o curso. Então, para mim, tchau por agora, e espero que eu te veja novamente no curso futuro. 27. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido algum conhecimento com isso. Se você gostou desta aula, confira o resto das minhas aulas aqui no Skillshare. Além disso, siga-me para quaisquer atualizações e também para ser informado de quaisquer novas classes à medida que elas se tornarem disponíveis. Então, obrigado mais uma vez. Boa sorte. Espero que te veja de novo em uma aula futura.