 |
|
||||
Você está aqui: Cards de Engenharia Civil - Estruturas de Concreto Armado |
||
|
||
 Link para compartilhar na Internet ou com seus amigos: |
||
HTML5 ::: HTML5 + JavaScript ::: Canvas |
Como carregar uma imagem (ou foto) no objeto Canvas do HTML5Quantidade de visualizações: 2903 vezes |
O objeto Canvas do HTML5 nos permite carregar uma imagem ou foto em tempo de execução e desenhá-la em sua superfície. Para isso, comece criando um objeto Image para guardar a imagem temporariamente na memória:var imagem = new Image(); // vamos carregar a logo do nosso site imagem.src = "https://www.arquivodecodigos.com.br/logo.jpg"; O passo seguinte é adicionar um "ouvidor" de evento neste objeto Image para que ele nos avise quando a imagem estiver 100% carregada. Veja:
// vamos adicionar um "ouvidor" de evento no objeto Image
imagem.addEventListener('load', desenharImagem);
Pronto! Veja que agora, quando o evento load do objeto Image disparar, a função desenharImagem será chamada e a imagem será então desenhada no Canvas. Veja:
function desenharImagem(){
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// e finalmente desenhamos a imagem
contexto.drawImage(imagem, 0, 0);
}
E aqui está o código completo para o exemplo:
<html>
<head>
<title>O objeto Canvas do HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
var imagem = new Image();
// vamos carregar a logo do nosso site
imagem.src = "https://www.arquivodecodigos.com.br/logo.jpg";
// vamos adicionar um "ouvidor" de evento no objeto Image
imagem.addEventListener('load', desenharImagem);
function desenharImagem(){
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
// e finalmente desenhamos a imagem
contexto.drawImage(imagem, 0, 0);
}
</script>
</body>
</html>
Ao executar a página nós teremos o seguinte resultado:  |
Java ::: Desafios e Lista de Exercícios Resolvidos ::: Java Básico |
Exercícios Resolvidos de Java - Um programa Java console ou GUI que exiba um número aleatório inteiro entre 0 e 10 (incluindo)Quantidade de visualizações: 13206 vezes |
|
Pergunta/Tarefa: Escreva um programa Java console ou GUI que exiba um número aleatório inteiro entre 0 e 10 (incluindo). Em seguida escreva um nova versão que exiba um número aleatório entre 10 e 20 (incluindo): Resposta/Solução: Veja a resolução e explicação para o código Java que exibe um número aleatório entre 0 e 10 (incluindo o 0 e 10):
O método random() da classe Math retorna um número aleatório
maior que ou igual a 0,0 e menor que 1,0. Assim, se o número
gerado for:
0.46095278727662825
e o multiplicarmos por 10, teremos 4.609527872766282. Se
aplicarmos uma conversão para inteiro teremos 4. Assim, para
garantir que o número 10 também poderá ser sorteado, basta
multiplicarmos Math.random() por 11. Veja:
public static void main(String[] args){
// vamos gerar um número aleatório entre 0 e 10
int numero = (int)(Math.random() * 11);
// vamos exibir o número aleatório gerado
System.out.println("O número gerado foi: " + numero);
}
Para sortear um número aleatório entre 10 e 20, só precisamos somar 10 ao número gerado. Veja:
public static void main(String[] args){
// vamos gerar um número aleatório entre 10 e 20
int numero = 10 + (int)(Math.random() * 11);
// vamos exibir o número aleatório gerado
System.out.println("O número gerado foi: " + numero);
}
|
Java ::: Desafios e Lista de Exercícios Resolvidos ::: Arrays e Matrix (Vetores e Matrizes) |
Exercícios Resolvidos de Java - Verifique se as componentes de um vetor de 10 componentes inteiros lidos pelo teclado formam uma progressão aritméticaQuantidade de visualizações: 1899 vezes |
|
Pergunta/Tarefa: Verifique se as componentes de um vetor de 10 componentes inteiros lidos pelo teclado formam uma progressão aritmética, informando se sim ou se não. Caso forme, imprima o termo inicial e a razão. Resposta/Solução: Para a entrada do usuário, nós vamos usar um objeto da classe Scanner. Veja a resolução comentada:
package arquivodecodigos;
import java.util.Scanner;
public class Estudos{
public static void main(String[] args){
// vamos usar a classe Scanner para leitura
Scanner entrada = new Scanner(System.in);
// declara e constrói um vetor de 10 inteiros
int valores[] = new int[10];
// vamos ler os valores dos elementos do vetor
for(int i = 0; i < valores.length; i++){
System.out.print("Informe o valor: ");
valores[i] = Integer.parseInt(entrada.nextLine());
}
// já temos o vetor. Agora vamos verificar se temos
// uma progressão geométrica
boolean progressao = true;
// vamos obter a razão
int razao = valores[1] / (valores[0]);
// vamos varrer os elementos do vetor e verificar se todos
// possuem a mesma razão
for(int i = 1; i < valores.length; i++){
if((valores[i] / (valores[i - 1])) != razao){
progressao = false;
break;
}
}
if(progressao){
System.out.println("Formam uma progressão geométrica.");
System.out.println("A razão é: " + razao);
System.out.println("O primeiro termo é: " + valores[0]);
}
else{
System.out.println("Não formam uma progressão geométrica.");
}
}
}
Ao executar este código Java nós teremos o seguinte resultado: Informe o valor: 1 Informe o valor: 2 Informe o valor: 4 Informe o valor: 8 Informe o valor: 16 Informe o valor: 32 Informe o valor: 64 Informe o valor: 128 Informe o valor: 256 Informe o valor: 512 Formam uma progressão geométrica. A razão é: 2 O primeiro termo é: 1 |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Adicionando três elementos ao final de um vetor em JavaScript usando o método push() do objeto Array - Como adicionar elementos ao final de um vetor usando JavaScript - RevisadoQuantidade de visualizações: 7530 vezes |
Neste dica mostrarei como usar o método push() do objeto Array da linguagem JavaScript para adicionar três elementos ao final de um vetor. Veja o código completo, incluindo a página HTML que permite executar o exemplo:
<html>
<head>
<meta charset="utf-8">
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos declarar e instanciar um vetor com 5 elementos
var valores = new Array(1, 2, 3, 4, 5);
document.write("Valores no vetor: " + valores + "<br>");
// agora vamos adicionar mais três elementos
valores.push(6, 7, 8);
document.write("Valores no vetor: " + valores);
</script>
</body>
</html>
Ao abrir esta página HTML nós teremos o seguinte resultado: Valores no vetor: 1,2,3,4,5 Valores no vetor: 1,2,3,4,5,6,7,8 |
JavaScript ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas |
Como calcular o seno de um número ou ângulo em JavaScript usando a função sin() do objeto MathQuantidade de visualizações: 9229 vezes |
|
Em geral, quando falamos de seno, estamos falando do triângulo retângulo de Pitágoras (Teorema de Pitágoras). A verdade é que podemos usar a função seno disponível nas linguagens de programação para calcular o seno de qualquer número, mesmo nossas aplicações não tendo nenhuma relação com trigonometria. No entanto, é sempre importante entender o que é a função seno. Veja a seguinte imagem:  Veja que temos um triângulo retângulo com as medidas já calculadas para a hipotenusa e os dois catetos, assim como os ângulos entre eles. Assim, o seno é a razão entre o cateto oposto (oposto ao ângulo theta) e a hipotenusa, ou seja, o cateto oposto dividido pela hipotenusa. Veja a fórmula: \[\text{Seno} = \frac{\text{Cateto oposto}}{\text{Hipotenusa}} \] Então, se dividirmos 20 por 36.056 (na figura eu arredondei) nós teremos 0.5547, que é a razão entre o cateto oposto e a hipotenusa (em radianos). Agora, experimente calcular o arco-cosseno de 0.5547. O resultado será 0.9828 (em radianos). Convertendo 0.9828 radianos para graus, nós obtemos 56.31º, que é exatamente o ângulo em graus entre o cateto oposto e a hipotenusa na figura acima. Pronto! Agora que já sabemos o que é seno na trigonometria, vamos entender mais sobre a função sin() da linguagem JavaScript. Esta função, disponível no objeto Math, recebe um valor numérico e retorna um valor, também numérico) entre -1 até 1 (ambos inclusos). Veja:
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos calcular o seno de três números
document.writeln("Seno de 0 = " + Math.sin(0));
document.writeln("<br>Seno de 1 = " + Math.sin(1));
document.writeln("<br>Seno de 2 = " + Math.sin(2));
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Seno de 0 = 0 Seno de 1 = 0.8414709848078965 Seno de 2 = 0.9092974268256817 Note que calculamos os senos dos valores 0, 1 e 2. Observe como os resultados conferem com a curva da função seno mostrada abaixo:  |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
