 |
|
|
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: 7762 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. |
PHP ::: PHP + MySQL ::: MySQL Improved Extension (mysqli) |
Como obter a quantidade de colunas de uma tabela - Como usar a função mysqli_field_count() para contar os campos de uma tabela - RevisadoQuantidade de visualizações: 11301 vezes |
|
Em algumas situações nós precisamos obter a quantidade de campos retornados como resultado de uma consulta SQL DML SELECT a uma determinada tabela do banco de dados. Para isso nós podemos usar o atributo field_count e a função mysqli_field_count(). A função mysqli_field_count() é usada no modo procedural, enquanto field_count é usada no modo orientado a objetos. Vamos começar com mysqli_field_count(). Veja o exemplo a seguir:
<?
// vamos efetuar a conexão com o banco
$con = new mysqli("localhost", "root",
"osmar1234", "estudos");
// conexão efetuada com sucesso?
if($con->connect_errno){
echo "Não foi possível efetuar a conexão: " .
$mysqli->connect_error;
exit(); // vamos sair daqui
}
// obtém a quantidade de colunas de uma determinada tabela
$query = "SELECT * FROM produtos";
$result = mysqli_query($con, $query);
echo "Esta tabela (retornada) possui " .
mysqli_field_count($con) . " colunas";
// vamos fechar a conexão
mysqli_close($con);
?>
Ao executarmos este código nós teremos um resultado parecido com: Esta tabela (retornada) possui 4 colunas Veja agora o mesmo exemplo usando a abordagem de programação orientada a objetos:
<?
// vamos efetuar a conexão com o banco
$con = new mysqli("localhost", "root",
"osmar1234", "estudos");
// conexão efetuada com sucesso?
if($con->connect_errno){
echo "Não foi possível efetuar a conexão: " .
$con->connect_error;
exit(); // vamos sair daqui
}
// obtém a quantidade de colunas de uma determinada tabela
$con->query("SELECT * FROM produtos");
echo "Esta tabela possui " . $con->field_count .
" colunas";
// vamos fechar a conexão
$con->close();
?>
Esta dica foi revisada e atualizada para o PHP 8. |
Delphi ::: Dicas & Truques ::: Matemática e Estatística |
Como calcular porcentagem em Delphi - Como efetuar cálculos de porcentagem em DelphiQuantidade de visualizações: 31429 vezes |
|
Cálculos de porcentagens estão presentes em boa parte das aplicações que desenvolvemos. Porém, há momentos em que a mente trava e não conseguimos lembrar com clareza como estes cálculos são feitos, principalmente em Delphi. Esta anotação tem o objetivo de ser uma fonte de pesquisa para os momentos em que suas habilidades matemáticas insistirem em continuar ocultas. Ex: 1 - Suponhamos que um produto que custe R$ 178,00 sofra um acréscimo de 15%. Qual o valor final do produto? Veja o código em Delphi:
// Algoritmo que calcula porcentagem em Delphi
program estudos_delphi;
{$APPTYPE CONSOLE}
uses
SysUtils, Math;
var
// variáveis usadas na resolução do problema
valor, percentual, valor_final: double;
begin
valor := 178.00; // valor original
percentual := 15.0 / 100.0; // 15%
valor_final := valor + (percentual * valor);
// mostra o resultado
WriteLn('O valor final do produto é: ' + FloatToStr(valor_final));
// O resultado será 204,70
WriteLn;
Write('Pressione Enter para sair...');
ReadLn;
end.
Ex: 2 - Um produto, cujo valor original era de R$ 250,00, teve um desconto de 8%. Qual foi seu valor final? Veja o código em Delphi:
// Algoritmo que calcula porcentagem em Delphi
program estudos_delphi;
{$APPTYPE CONSOLE}
uses
SysUtils, Math;
var
// variáveis usadas na resolução do problema
valor, percentual, valor_final: double;
begin
valor := 250.00; // valor original
percentual := 8.0 / 100.0; // 8%
valor_final := valor - (percentual * valor);
// mostra o resultado
WriteLn('O valor final do produto é: ' + FloatToStr(valor_final));
// O resultado será 230,00
WriteLn;
Write('Pressione Enter para sair...');
ReadLn;
end.
Ex: 3 - Em um concurso de perguntas e respostas, um jovem acertou 72 das 90 perguntas apresentadas. Qual foi a porcentagem de acertos? E a porcentagem de erros? Veja o código em Delphi:
// Algoritmo que calcula porcentagem em Delphi
program estudos_delphi;
{$APPTYPE CONSOLE}
uses
SysUtils, Math;
var
// variáveis usadas na resolução do problema
perguntas, acertos: double;
begin
perguntas := 90.0;
acertos := 72.0;
// mostra a porcentagem de acertos
WriteLn('Porcentagem de acertos: ' +
FloatToStr((acertos / perguntas) * 100) + '%');
// mostra a porcentagem de erros
WriteLn('Porcentagem de erros: ' +
FloatToStr(((perguntas - acertos) / perguntas) * 100) + '%');
// Os resultados serão 80% e 20%
WriteLn;
Write('Pressione Enter para sair...');
ReadLn;
end.
Ex: 4 - Um aparelho de CD foi adquirido por R$ 300,00 e revendido por R$ 340,00. Qual foi a porcentagem de lucro na transação? Veja o código em Delphi:
// Algoritmo que calcula porcentagem em Delphi
program estudos_delphi;
{$APPTYPE CONSOLE}
uses
SysUtils, Math;
var
// variáveis usadas na resolução do problema
valor_anterior, novo_valor, porcentagem_lucro: double;
begin
valor_anterior := 300.0; // valor anterior
novo_valor := 340.0; // valor novo
// calcula a porcentagem de lucro
// efetua o cálculo
porcentagem_lucro := ((novo_valor * 100) / valor_anterior) - 100;
WriteLn('A porcentagem de lucro foi de: ' +
FloatToStr(porcentagem_lucro) + '%');
// O resultado será 13,33
WriteLn;
Write('Pressione Enter para sair...');
ReadLn;
end.
Ex: 5 - Uma loja repassa 5% do lucro a seus vendedores. Se um produto custa R$ 70,00, qual o valor em reais repassado a um determinado vendedor? Veja o código em Delphi:
// Algoritmo que calcula porcentagem em Delphi
program estudos_delphi;
{$APPTYPE CONSOLE}
uses
SysUtils, Math;
var
// variáveis usadas na resolução do problema
valor, percentual, comissao: double;
begin
valor := 70.0; // valor do produto
percentual := 5.0 / 100.0; // 5%
// calcula a comissão
comissao := percentual * valor;
// mostra o resultado
WriteLn('O valor repassado ao vendedor é: '
+ FloatToStr(comissao));
// O resultado será 3,5
WriteLn;
Write('Pressione Enter para sair...');
ReadLn;
end.
|
Python ::: Desafios e Lista de Exercícios Resolvidos ::: Python Básico |
Exercícios Resolvidos de Python - Uma empresa de táxi cobra a bandeirada de R$ 5,00 e ainda o valor de R$ 1,50 para cada quilômetro rodadoQuantidade de visualizações: 819 vezes |
|
Pergunta/Tarefa: Uma empresa de táxi cobra a bandeirada de R$ 5,00 e ainda o valor de R$ 1,50 para cada quilômetro rodado. Escreva um programa em Python que pede a distância de uma corrida em quilômetros e mostre o valor a ser pago pelo cliente. Sua saída deverá ser parecida com: Distância da corrida (km): 15 O valor da corrida foi: R$ 27.50 Veja a resolução comentada deste exercício usando Python:
# Calcular o valor da corrida de um táxi em Python
# função principal do programa
def main():
# vamos solicitar a distância da corrida em quilômetros
distancia_km = int(input("Distância da corrida (km): "))
# sabemos que o valor fixo é R$ 5,00
valor_fixo = 5.0
# sabemos também que o valor por quilõmetro rodado é R$ 1,50
valor_km_rodado = 1.5
# então já podemos calcular o valor da corrida
valor_corrida = valor_fixo + (distancia_km * valor_km_rodado)
# e mostramos o resultado
print("O valor da corrida foi: R$ {0}".format(valor_corrida))
if __name__== "__main__":
main()
|
PHP ::: Dicas & Truques ::: Matemática e Estatística |
Como calcular porcentagem em PHP - Como efetuar cálculos de porcentagem em PHPQuantidade de visualizações: 33853 vezes |
|
Cálculos de porcentagens estão presentes em boa parte das aplicações que desenvolvemos. Porém, há momentos em que a mente trava e não conseguimos lembrar com clareza como estes cálculos são feitos, principalmente em PHP. Esta anotação tem o objetivo de ser uma fonte de pesquisa para os momentos em que suas habilidades matemáticas insistirem em continuar ocultas. Ex: 1 - Suponhamos que um produto que custe R$ 178,00 sofra um acréscimo de 15%. Qual o valor final do produto? Veja o código em PHP: <?php // Algoritmo que calcula porcentagem em PHP $valor = 178.00; // valor original $percentual = 15.0 / 100.0; // 15% $valor_final = $valor + ($percentual * $valor); // mostra o resultado echo "O valor final do produto é: " . $valor_final; // O resultado será 204,70 ?> Ex: 2 - Um produto, cujo valor original era de R$ 250,00, teve um desconto de 8%. Qual foi seu valor final? Veja o código em PHP: <?php // Algoritmo que calcula porcentagem em PHP $valor = 250.00; // valor original $percentual = 8.0 / 100.0; // 8% $valor_final = $valor - ($percentual * $valor); // mostra o resultado echo "O valor final do produto é: " . $valor_final; // O resultado será 230,00 ?> Ex: 3 - Em um concurso de perguntas e respostas, um jovem acertou 72 das 90 perguntas apresentadas. Qual foi a porcentagem de acertos? E a porcentagem de erros? Veja o código em PHP:
<?php
// Algoritmo que calcula porcentagem em PHP
$perguntas = 90.0;
$acertos = 72.0;
// mostra a porcentagem de acertos
echo "Porcentagem de acertos: " .
(($acertos / $perguntas) * 100) . "%";
// mostra a porcentagem de erros
echo "<br>Porcentagem de erros: " .
((($perguntas - $acertos) / $perguntas) * 100) . "%";
// Os resultados serão 80% e 20%
?>
Ex: 4 - Um aparelho de CD foi adquirido por R$ 300,00 e revendido por R$ 340,00. Qual foi a porcentagem de lucro na transação? Veja o código em PHP:
<?php
// Algoritmo que calcula porcentagem em PHP
$valor_anterior = 300.0; // valor anterior
$novo_valor = 340.0; // valor novo
// calcula a porcentagem de lucro
// efetua o cálculo
$porcentagem_lucro = (($novo_valor * 100) / $valor_anterior) - 100;
echo "A porcentagem de lucro foi de: " .
$porcentagem_lucro . "%";
// O resultado será 13,33
?>
Ex: 5 - Uma loja repassa 5% do lucro a seus vendedores. Se um produto custa R$ 70,00, qual o valor em reais repassado a um determinado vendedor? Veja o código em PHP:
<?php
// Algoritmo que calcula porcentagem em PHP
$valor = 70.0; // valor do produto
$percentual = 5.0 / 100.0; // 5%
// calcula a comissão
$comissao = $percentual * $valor;
// mostra o resultado
echo "O valor repassado ao vendedor é: " .
$comissao;
// O resultado será 3,5
?>
|
Desafios, Exercícios e Algoritmos Resolvidos de PHP |
Veja mais Dicas e truques de PHP |
Dicas e truques de outras linguagens |
|
VisuAlg - Como calcular o coeficiente angular de uma reta em VisuAlg dados dois pontos no plano cartesiano |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
