 |
|
||||
Você está aqui: Cards de Hidrostática |
||
|
||
 Link para compartilhar na Internet ou com seus amigos: |
||
HTML5 ::: Aplicativos Completos ::: Programas de desenho, edição e visualização de imagens e fotos |
Como criar um programa de desenho simples usando o objeto Canvas do HTML5Quantidade de visualizações: 7619 vezes |
|
Revisando alguns códigos que desenvolvi para clientes ao longo desses anos, encontrei um exemplo de um programa de desenho bem simples demonstrando as possibilidades gráficas do elemento Canvas do HTML. Este código foi escrito há uns dois anos e resolvi compartilhar com todos, para que vocês possam aprimorá-lo e acrescentar novas idéias, afinal, o HTML5 está mais atual do que nunca. Veja o resultado no navegador:  Eu o escrevi de forma bem simples, sem usar jQuery ou qualquer outro framework, apenas JavaScript raiz mesmo, de forma que até os estudantes mais iniciantes não terão dificuldade de entender. Veja a listagem completa e com comentários:
<html>
<head>
<title>Desenhando no canvas do HTML5</title>
</head>
<body style="padding: 15px">
<b>Clique e arraste para desenhar</b><br><br>
<canvas id="quadro" style="border: 1px solid #666"
width="600" height="350"></canvas>
<br><br><button onClick="limpar()">Limpar</button>
<script type="text/javascript">
// obtém uma referência ao canvas
var quadro = document.getElementById('quadro');
// vamos obter o contexto de desenho
var areaDesenho = quadro.getContext("2d");
// podemos desenhar?
var podeDesenhar = false; // ainda não
// vetores para guardar as posições x, y, e se o mouse está sendo
// movimentado pressionado
var vetorX = new Array();
var vetorY = new Array();
var vetorArrastar = new Array();
// agora vamos adicionar na área de desenho um "ouvidor" de
// eventos mousedown, ou seja, vamos detectar quando o usuário
// pressionar o botão do mouse (sem soltar)
quadro.addEventListener('mousedown', function(e){
// podemos iniciar o desenho
podeDesenhar = true;
registrarClique(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, false);
desenhar(); // faça o desenho, moço
});
// o "ouvidor" de evento que detecta se o mouse está sendo arrastado
// pressionado
quadro.addEventListener('mousemove', function(e){
if(podeDesenhar){
registrarClique(e.pageX - this.offsetLeft, e.pageY -
this.offsetTop, true);
desenhar(); // faça o desenho, moço
}
});
// o "ouvidor" de evento que detecta se o mouse foi liberado
// e interrompe o desenho
quadro.addEventListener('mouseup', function(e){
podeDesenhar = false;
});
// o mouse saiu da área de desenho?
quadro.addEventListener('mouseleave', function(e){
podeDesenhar = false;
});
function registrarClique(x, y, arrastar){
// aqui nós guardamos em vetores as posições x, y do clique ou
// o movimento do mouse pressionado.
vetorX.push(x);
vetorY.push(y);
vetorArrastar.push(arrastar);
}
// é aqui que a mágica ocorre
function desenhar(){
// primeiro vamos limpar o quadro de desenho
areaDesenho.clearRect(0, 0, areaDesenho.canvas.width,
areaDesenho.canvas.height);
areaDesenho.strokeStyle = "#5c5cd6"; // cor
areaDesenho.lineJoin = "round"; // formato da junção de linha
areaDesenho.lineWidth = 5; // largura da linha
// percorremos os vetores, usando como base o vetor de coordenadas x
for(var i = 0; i < vetorX.length; i++){
areaDesenho.beginPath(); // inicia o caminho
// o mouse foi arrastado neste evento?
if((vetorArrastar[i] == true && i > 0)){
areaDesenho.moveTo(vetorX[i - 1], vetorY[i - 1]);
}
else{
// é o início do desenho
areaDesenho.moveTo(vetorX[i] - 1, vetorY[i]);
}
// desenha a linha do ponto X ao ponto Y
areaDesenho.lineTo(vetorX[i], vetorY[i]);
// fecha o caminho
areaDesenho.closePath();
// conclui de fato o desenho
areaDesenho.stroke();
}
}
// e aqui nós limpamos a área de desenho e esvaziamos os vetores
function limpar(){
areaDesenho.clearRect(0, 0, areaDesenho.canvas.width,
areaDesenho.canvas.height);
vetorX = [];
vetorY = [];
vetorArrastar = [];
}
</script>
</body>
</html>
Salve o código como "desenho.html" (cuidado para não salvar como "desenho.html.txt") e abra-o no seu navegador, remoto ou localmente. Você pode começar suas modificações alterando a cor do desenho, a largura da linha, etc. Você pode também deixar figuras pré-configuradas e até permitir que o usuário inclua fotos no Canvas. Para os estudantes que já sabem Node.js, saiba que é possível enviar os três vetores via sockets em um ambiente real time para que outros usuários na rede vejam o seu desenho em tempo real. Bons estudos. |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como retornar a quantidade de dias para um determinado mês e ano em JavaScriptQuantidade de visualizações: 9011 vezes |
|
Sempre que estamos desenvolvendo aplicações de calendário ou outras tarefas envolvendo datas e horas em JavaScript nós precisamos saber quantos dias um determinado mês possui. Nesta dica que mostro como escrever uma função JavaScript chamada diasNoMes() que recebe um mês e um ano e retorna a quantidade de dias que tal mês possui. Veja a página HTML completa para o exemplo:
<!doctype html>
<html>
<head>
<title>Data e hora em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// função que recebe um mês e ano e retorna
// a quantidade de dias no mês informado
function diasNoMes(mes, ano){
return 32 - new Date(ano, mes, 32).getDate();
}
// o mês começa com 0 (Fevereiro = 1)
document.write("O mês informado possui " +
diasNoMes(1, 2023) + " dias");
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: O mês informado possui 28 dias |
Portugol ::: Desafios e Lista de Exercícios Resolvidos ::: Estruturas de Controle |
Exercício Resolvido de Portugol - Um programa que lê três números inteiros e mostra o maiorQuantidade de visualizações: 3803 vezes |
|
Pergunta/Tarefa: Faça um algoritmo em Portugol que solicita três números inteiros e mostra o maior deles. Exiba uma mensagem caso os três números não forem diferentes. Sua saída deverá ser parecida com: Informe o primeiro número: 5 Informe o segundo número: 8 Informe o terceiro número: 3 O segundo número é o maior Veja a resolução comentada deste exercício usando Portugol Webstudio:
// Um programa que lê três números inteiros e mostra o maior
programa {
funcao inicio() {
// variáveis usadas na resolução do problema
inteiro num1, num2, num3
// vamos solicitar os três números inteiros
escreva("Informe o primeiro número: ")
leia(num1)
escreva("Informe o segundo número: ")
leia(num2)
escreva("Informe o terceiro número: ")
leia(num3)
// o primeiro número é o maior?
se (num1 > num2 e num1 > num3) {
escreva("O primeiro número é o maior")
}
senao {
// o segundo número é o maior?
se (num2 > num1 e num2 > num3) {
escreva("O segundo número é o maior")
}
senao{
// o terceiro número é o maior?
se (num3 > num1 e num3 > num2) {
escreva("O terceiro número é o maior")
}
// os número não são diferentes
senao {
escreva("Os três números não são diferentes")
}
}
}
}
|
Python ::: Dicas & Truques ::: Strings e Caracteres |
Como testar se o primeiro caractere de cada palavra em uma string Python é o único em letra maiúscula usando a função istitle()Quantidade de visualizações: 8976 vezes |
|
Nesta dica mostrarei como podemos usar a função istitle() da linguagem Python para verificar se o primeiro caractere de cada palavra em uma frase ou texto é o único caractere em letra maiúscula. Se o teste for verdadeiro o retorno é true, caso contrário o retorno é false. Veja o exemplo completo:
def main():
frase = "Gosto De Programar Em Python"
if frase.istitle():
print("O primeiro caractere de cada palavra é maiusculo")
else:
print("O teste não resultou verdadeiro")
if __name__== "__main__":
main()
Ao executar este código Python nós teremos o seguinte resultado: O primeiro caractere de cada palavra é maiusculo. |
Java ::: Dicas & Truques ::: Matemática e Estatística |
Como resolver uma equação do segundo grau em Java - Como calcular Bhaskara em JavaQuantidade de visualizações: 3258 vezes |
|
Nesta dica mostrarei como encontrar as raízes de uma equação quadrática, ou seja, uma equação do 2º usando a linguagem Java. Definimos como equação do 2º grau ou equações quadráticas qualquer equação do tipo ax² + bx + c = 0 em que a, b e c são números reais e a ≠ 0. Ela recebe esse nome porque, no primeiro membro da igualdade, há um polinômio de grau dois com uma única incógnita. Note que, dos coeficientes a, b e c, somente o a é diferente de zero, pois, caso ele fosse igual a zero, o termo ax² seria igual a zero, logo a equação se tornaria uma equação do primeiro grau: bx + c = 0. Independentemente da ordem da equação, o coeficiente a sempre acompanha o termo x², o coeficiente b sempre acompanha o termo x, e o coeficiente c é sempre o termo independente. Como resolver uma equação do 2º grau Conhecemos como soluções ou raízes da equação ax² + bx + c = 0 os valores de x que fazem com que essa equação seja verdadeira. Uma equação do 2º grau pode ter no máximo dois números reais que sejam raízes dela. Para resolver equações do 2º grau completas, existem dois métodos mais comuns: a) Fórmula de Bhaskara; b) Soma e produto. O primeiro método é bastante mecânico, o que faz com que muitos o prefiram. Já para utilizar o segundo, é necessário o conhecimento de múltiplos e divisores. Além disso, quando as soluções da equação são números quebrados, soma e produto não é uma alternativa boa. Como resolver uma equação do 2º grau usando Bhaskara Como nosso código Java vai resolver a equação quadrática usando a Fórmula de Bhaskara, o primeiro passo é encontrar o determinante. Veja: \[\Delta =b^2-4ac\] Nem sempre a equação possui solução real. O valor do determinante é que nos indica isso, existindo três possibilidades: a) Se determinante > 0, então a equação possui duas soluções reais. b) Se determinante = 0, então a equação possui uma única solução real. c) Se determinante < 0, então a equação não possui solução real. Encontrado o determinante, só precisamos substituir os valores, incluindo o determinante, na Fórmula de Bhaskara: \[x = \dfrac{- b\pm\sqrt{b^2- 4ac}}{2a}\] Vamos agora ao código Java. Nossa aplicação vai pedir para o usuário informar os valores dos três coeficientes a, b e c e, em seguida, vai apresentar as raizes da equação:
package estudos;
import java.util.Scanner;
public class Estudos{
public static void main(String[] args){
// para efetuar a leitura do usuário
Scanner entrada = new Scanner(System.in);
// os coeficientes
double a, b, c;
// as duas raizes, a imaginaria e o discriminante
double raiz1, raiz2, imaginaria, discriminante;
// vamos pedir para o usuário informar os valores dos coeficientes
System.out.print("Valor do coeficiente a: ");
a = Double.parseDouble(entrada.nextLine());
System.out.print("Valor do coeficiente b: ");
b = Double.parseDouble(entrada.nextLine());
System.out.print("Valor do coeficiente c: ");
c = Double.parseDouble(entrada.nextLine());
// vamos calcular o discriminante
discriminante = (b * b) - (4 * a * c);
// a equação possui duas soluções reais?
if(discriminante > 0){
raiz1 = (-b + Math.sqrt(discriminante)) / (2 * a);
raiz2 = (-b - Math.sqrt(discriminante)) / (2 * a);
System.out.println("Existem duas raizes: x1 = " + raiz1
+ " e x2 = " + raiz2);
}
// a equação possui uma única solução real?
else if(discriminante == 0){
raiz1 = raiz2 = -b / (2 * a);
System.out.println("Existem duas raizes iguais: x1 = "
+ raiz1 + " e x2 = " + raiz2);
}
// a equação não possui solução real?
else if(discriminante < 0){
raiz1 = raiz2 = -b / (2 * a);
imaginaria = Math.sqrt(-discriminante) / (2 * a);
System.out.println("Existem duas raízes complexas: x1 = " +
raiz1 + " + " + imaginaria + " e x2 = " + raiz2
+ " - " + imaginaria);
}
}
}
Ao executar este código Java nós teremos o seguinte resultado: Valor do coeficiente a: 1 Valor do coeficiente b: 2 Valor do coeficiente c: -3 Existem duas raizes: x1 = 1.0 e x2 = -3.0 |
Desafios, Exercícios e Algoritmos Resolvidos de Java |
Veja mais Dicas e truques de Java |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
