Muito bom resolvi o problema anterior e consegui fazer tudo certo nesta aula.
Obrigado.
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
Se você já tem uma conta,
Funções em Javascript
18/42Recursos
Uma função é um conjunto de instruções que pode ser chamado várias vezes pelo código para ser executado. Isso auxilia bastante a não ter repetição de código, quando as mesmas instruções precisam ser realizadas várias vezes em diferentes partes de um programa. Uma função pode receber argumentos, que são variáveis com valores iniciais específicos e retornar um valor de resposta para a parte do código de onde está sendo chamada.
Um exemplo de função bem simples:
function multiplica(x,y){
var z = x*y;
return z;
}Contribuições 15
Perguntas 2
Ordenar por:
A reta verde não está aparecendo, está tudo certinho.
Bom dia,
Neste exemplo, as retas vermelho e verde não estão coincidindo nas coordenas (200,200), e o código está correto, mais alguém com este problema?
Segue o código do script:
var canvas = document.getElementById(“meu-canvas”);
var papel = canvas.getContext (“2d”);
var x = 50; //ponto inicia da linha
var y = 50;
desenho (“red”, x, y, 200, 200)
desenho (“green”, x+150, y, 200, 200)
function desenho(cor, xInicial, yInicial, xFinal, yFinal){ //definindo a funcao
papel.beginPath(); //Começa a desenhar no papel
papel.strokeStyle = cor //cor da linha
papel.lineWidth = 3; //espessura da linha
papel.moveTo(xInicial, yInicial); //começa o desenho a partir desse ponto
papel.lineTo(xFinal, yFinal);
papel.stroke();
papel.closePath();
}
Muito bom!
não sei porque mas simplesmente não consigo fazer o desenho e não sei mais o que fazer. Eu deveria baixar algum pacote ou extensão?
meu html
<!DOCTYPE html>
<html>
<head>
<title>aprendendo a desenhar</title>;
<meta charset = “utf-8”>;
</head>
<body>
<canvas id=“meu-canvas” width= “400px” height= “400px”></canvas>;
<script src = “script.js”></script>;
</body>
</html>
meu script
var canvas = document.getElementById (“meu-canvas”);
var papel = canvas.getContext(“2d”);
var x = 50;
var y = 50;
desenha (“red”, x, y, 200, 200);
desenha (“green”, x+150, y, 200, 200);
function desenha(cor, xInicial, yInicial, xFinal, yFinal){
papel.beginPath();
papel.strokeStyle= cor;
papel.lineWidth = 3;
papel.moveTo = (xInicial,yInicial);
papel.lineTo= (xFinal,yFinal);
papel.stroke();
papel.closePath();
}
TOP
Aí oh, me precipitei mas ensinaram funções agora hahaha
O curso cada vez mais vem me surpreendendo!
Muito massa!
Conteudo muito bom.
top
Mesmo colocando a cor nas variáveis, minhas linhas não ficam coloridas. Não sei se tem algo errado com o código ou se meu navegador não consegue ler. Segue:
var canvas = document.getElementById(“meucanvas”);
var papel = canvas.getContext(“2d”);
var x = 50;
var y = 50;
desenho(“red”, x, y, 200, 200)
desenho(“green”, x+150, y, 200, 200)
function desenho(cor, xinicial, yinicial, xfinal, yfinal){
papel.beginPath();
papel.stokeStyle = “cor”;
papel.lineWidth = 3;
papel.moveTo(xinicial, yinicial);
papel.lineTo(xfinal, yfinal);
papel.stroke();
papel.closePath();
}
Incrível
Gostaria de entender a necessidade destes atributos no final do código.
papel.stroke(); papel.closePath();
ja não tem o atributo lineWidth= 3; para isso?
se eu não colocar o traço vai infinitamente?
Agradeço a quem responder.
muito bacana!
Quer ver mais contribuições, perguntas e respostas da comunidade?