Teacher: <p id="paragrafo>
eu: <p> id=“paragrafo”</p>
eu again: eu escreve isso igual @-@
eu again too: aaaaaah 😄
Boas-vindas e Introdução
Criando sua primeira linha de código
Apresentação docurso e do professor Rafael Pacheco
Adicionando um pouco de teoria
Visão geral do curso
Preparando o ambiente
Conceitos básicos de programação para web
O que é HTML, CSS e JS?
Primeiros passos com a função alert no navegador
HTML, CSS e JS de verdade
Primeiro projeto: Peso em outro planeta
Entendendo o problema
Playground: pelo menos um dos números é par?
Calculando um peso em outro planeta
Obtendo os dados do usuário
Utilizando fluxos condicionais
Segundo projeto: Trabalhando com Canvas
Entendendo o problema
Entendendo os principais objetos em um navegador
Trabalhando com window e document
Trabalhando com DOM
Funções em Javascript
Eventos e Formulários em HTML e JS
Detectando eventos do teclado
Rabiscando o canvas com as setas do teclado
Terceiro projeto: Fazenda Platzi
Entendendo o problema
Funções matemáticas e números aleatórios em JS
Trabalhando com ciclos (while e for)
Carregando imagens ao canvas
Carregando imagens ao canvas de forma aleatória
Quarto projeto: FizzBuzz
Entendendo o problema
Finalizando o projeto do FizzBuzz
Divisão, módulo e resto em Javascript
Codificando um FizzBuzz
Quinto projeto: Álbum de figurinhas
Entendendo o problema
Entendendo as coleções (Arrays)
Classes e objetos em Javascript
Analisando todas as figurinhas
Sexto projeto: Cliente e Servidor
Entendendo o problema
Modelo Cliente/Servidor
Instalando Node.JS e o framework express.js
Detalhes de instalação para o Windows e Mac
Criando seu primeiro código de servidor com express.js
Criando uma API para descobrir as horas
Conclusão
Aulas ao vivo
Sessão ao vivo: o que você vai aprender no curso
Você não tem acesso a esta aula
Continue aprendendo! Junte-se e comece a impulsionar sua carreira
Rafael Pacheco
O DOM nos permite mexer no conteúdo de uma página através de um script. Através dele, vamos começar a implementar o nosso canvas. Ele funciona através de um plano cartesiano com coordenadas no eixo X e Y, que, no nosso caso, vai de 0 a 400 pixeis em ambos eixos.
Através da especificação de um ponto inicial e um ponto final, podemos desenhar retas na nossa página e é isso o que faremos esta aula.
Contribuições 24
Perguntas 12
Teacher: <p id="paragrafo>
eu: <p> id=“paragrafo”</p>
eu again: eu escreve isso igual @-@
eu again too: aaaaaah 😄
Dica: Se não estiver aparecendo a linha para você, indico que apague a pasta e crie uma nova. Refaça os códigos novamente com muita atenção.
Funcionou comigo!
Explosão de conhecimento.
No console aparece a seguinte mensagem: canvas.getContex is not a function
O meu código:
var canvas = document.getElementById(“meu-canvas”);
var papel = canvas.getContex(“2d”);
var x = 50;
var y = 50;
papel.beginPath();
papel.strokeStyle = “red”;
papel.lineWidth = 3;
papel.moveTo(x, y);
papel.lineTo(200, 200);
papel.stroke();
papel.closePath();
No meu computador não apareceu a linha !??
O que se pode fazer?
Porque temos que usar esse id?
Não funcionou aqui, já conferi várias vezes, mas ñ achei o erro.
Galera, no meu eu tive que baixar um pacote do canvas que continha o getElementaryById para funcionar, pois o meu não tinha. Outra coisa, o begin e close Path eu não declarei como função, ao invés de Patch();, coloquei sem o parenteses, só assim funcionou, porém ainda não consigo desenhar na tela toda ainda.
Simplesmente o código não vai, ja revisei tudo e nada. Mas bela aula, sempre explicando muito bem
Meu Deus! Isso é fantástico!
A cada aula eu fico mais “hypada”!!
JS e HTML são completamente diferentes do que estou acostumada a lidar (C/Java/Python).
Estou amando muito cada aula!
Excelente didática! Muito obrigada, professor!! 😄
Excelente didática!!
Se alguém tiver problemas, e não estiver conseguindo visualizar a linha na página, observar, como apontado aqui pela aluna @priscila-vilemen na penúltima linha do “script.js”, deve estar como “papel.stroke();” e não “papel.strokeStyle();”
;D
não consigo visualizar a linha. Onde tenho o error?
<
var canvas = document.getElementById("meu-canvas");
var papel = canvas.getContext("2d");
var x = 50;
var y = 50;
papel.beginPath();
papel.strokeStyle = "red"
papel.linewidth = 3;
papel.moveTo(x, y);
papel.lineTo(200, 200);
papel.strokeStyle();
papel.closePath();
>
Fiz e refiz varias vezes e não funcionou. Não aparece nada.
Aula super produtiva!
O meu código estava dando errado porque o código é basicamente casesensitive.
Escrevi:
beginPAth e closePAth, ao invés de beginPath e closePath
show
massa!
perfeito
Não entendi para que serve Stroke em 12.02 quando é escrita a linha
papel.stroke();
Tentei muito e a minha linha não aparecia até que percebi onde estava o erro. em algumas linhas estava usando a variável papeR ao invés de papeL.
Depois de fazer funcionar o script foi legal brincar um pouco com o tamanho da linha e do canvas.
não consigo!!
😦
var canvas = document.getElementById(“meu-canvas”);
var papel = canvas.getContext(“2d”);
var x = 50;
var y = 50;
papel.beginPath();
papel.strokeStyle = “red”;
papel.lineWidth = 3;
papel.moveTo(x, y);
papel.lineTo(200, 200);
papel.stroke();
papel.closePath();
não consigo riscar. onde está meu erro?
var canvas = document.getElementById (“meu-canvas”)
var papel = canvas.getcontext(“2D”)
var x = 50;
var y = 50;
papel.beginpath();
papel.strokestyle = “red”;
papel.linewidth = 3;
papel.moveto(x, y);
papel.lineto(200, 200);
papel.stroke();
papel.closepath();
Quer ver mais contribuições, perguntas e respostas da comunidade?