 |
|
||||
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: 7735 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. |
Python ::: Dicas & Truques ::: Lista (List) |
Vetores e matrizes em Python - Como inserir itens em posições aleatórias de uma listaQuantidade de visualizações: 10073 vezes |
|
Este exemplo mostra como adicionar itens em posições aleatórias de uma lista Python. Note como usamos o método insert() da classe List passando um valor randômico para o índice no qual o novo elemento será inserido. Veja o código completo para a dica:
# vamos importar o módulo random
import random
def main():
# cria uma lista vazia
valores = []
# início do laço for
for i in range(1, 11):
valor = int(input("Informe um inteiro: "))
if(len(valores) == 0):
valores.insert(0, valor)
else:
# insere o valor em um posição aleatória
valores.insert(random.randrange(0,
len(valores)), valor)
# exibe os valores da lista
print("Valores na lista:", valores, "\n")
# fim do laço for
if __name__== "__main__":
main()
Ao executarmos este código Python nós teremos o seguinte resultado: Informe um inteiro: 9 Valores na lista: [9] Informe um inteiro: 3 Valores na lista: [3, 9] Informe um inteiro: 2 Valores na lista: [2, 3, 9] Informe um inteiro: 8 Valores na lista: [2, 3, 8, 9] Informe um inteiro: 10 Valores na lista: [10, 2, 3, 8, 9] Informe um inteiro: 18 Valores na lista: [18, 10, 2, 3, 8, 9] Informe um inteiro: 30 Valores na lista: [18, 10, 30, 2, 3, 8, 9] Informe um inteiro: 60 Valores na lista: [18, 10, 30, 2, 3, 8, 60, 9] Informe um inteiro: 67 Valores na lista: [18, 10, 67, 30, 2, 3, 8, 60, 9] Informe um inteiro: 82 Valores na lista: [18, 10, 67, 30, 2, 3, 8, 82, 60, 9] |
GNU Octave ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas |
Como calcular o cosseno de um ângulo em GNU Octave usando a função cos() - Calculadora de cosseno em OctaveQuantidade de visualizações: 3157 vezes |
|
Em geral, quando falamos de cosseno, estamos falando do triângulo retângulo de Pitágoras (Teorema de Pitágoras). A verdade é que podemos usar a função cosseno disponível nas linguagens de programação para calcular o cosseno 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 cosseno. 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 cosseno é a razão entre o cateto adjascente e a hipotenusa, ou seja, o cateto adjascente dividido pela hipotenusa. Veja a fórmula: \[\text{Cosseno} = \frac{\text{Cateto adjascente}}{\text{Hipotenusa}} \] Então, se dividirmos 30 por 36.056 (na figura eu arredondei) nós teremos 0.8320, que é a razão entre o cateto adjascente e a hipotenusa (em radianos). Agora, experimente calcular o arco-cosseno de 0.8320. O resultado será 0.5881 (em radianos). Convertendo 0.5881 radianos para graus, nós obtemos 33.69º, que é exatamente o ângulo em graus entre o cateto adjascente e a hipotenusa na figura acima. Pronto! Agora que já sabemos o que é cosseno na trigonometria, vamos entender mais sobre a função cos() da linguagem GNU Octave (script do GNU Octave). Esta função, já embutida na linguagem, recebe um valor numérico double e retorna um valor double, ou seja, também numérico) entre -1 até 1 (ambos inclusos). Veja:
# vamos calcular o cosseno de três números
fprintf("Cosseno de 0 = %f\n", cos(0))
fprintf("Cosseno de 1 = %f\n", cos(1))
fprintf("Cosseno de 2 = %f\n", cos(2))
Ao executar este código GNU Octave nós teremos o seguinte resultado: Cosseno de 0 = 1.000000 Cosseno de 1 = 0.540302 Cosseno de 2 = -0.416147 Note que calculamos os cossenos dos valores 0, 1 e 2. Observe como os resultados conferem com a curva da função cosseno mostrada abaixo:  |
Python ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas |
Como calcular o cosseno de um ângulo em Python usando a função cos() do módulo Math - Calculadora de cosseno em PythonQuantidade de visualizações: 2791 vezes |
|
Como calcular o cosseno de um ângulo em Python usando a função cos() do módulo Math - Calculadora de cosseno em Python Em geral, quando falamos de cosseno, estamos falando do triângulo retângulo de Pitágoras (Teorema de Pitágoras). A verdade é que podemos usar a função cosseno disponível nas linguagens de programação para calcular o cosseno 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 cosseno. 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 cosseno é a razão entre o cateto adjascente e a hipotenusa, ou seja, o cateto adjascente dividido pela hipotenusa. Veja a fórmula: \[\text{Cosseno} = \frac{\text{Cateto adjascente}}{\text{Hipotenusa}} \] Então, se dividirmos 30 por 36.056 (na figura eu arredondei) nós teremos 0.8320, que é a razão entre o cateto adjascente e a hipotenusa (em radianos). Agora, experimente calcular o arco-cosseno de 0.8320. O resultado será 0.5881 (em radianos). Convertendo 0.5881 radianos para graus, nós obtemos 33.69º, que é exatamente o ângulo em graus entre o cateto adjascente e a hipotenusa na figura acima. Pronto! Agora que já sabemos o que é cosseno na trigonometria, vamos entender mais sobre a função cos() da linguagem Python. Esta função, que faz parte do módulo Math, recebe um valor numérico float e retorna um valor float, ou seja, também numérico) entre -1 até 1 (ambos inclusos). Veja:
# vamos importar o módulo Math
import math as math
def main():
# vamos calcular o cosseno de três números
print("Cosseno de 0 = %f" % math.cos(0))
print("Cosseno de 1 = %f" % math.cos(1))
print("Cosseno de 2 = %f" % math.cos(2))
if __name__== "__main__":
main()
Ao executar este código Python nós teremos o seguinte resultado: Cosseno de 0 = 1.000000 Cosseno de 1 = 0.540302 Cosseno de 2 = -0.416147 Note que calculamos os cossenos dos valores 0, 1 e 2. Observe como os resultados conferem com a curva da função cosseno mostrada abaixo: |
Nossas 20 dicas & truques de programação mais populares |
|
Python - Como criar um relógio analógico no Pygame - Código completo com variáveis e comentários em português |
Você também poderá gostar das dicas e truques de programação abaixo |
|
Delphi - Como obter a quantidade de dias para um determinado ano usando a função DaysInAYear() do Delphi |
Nossas 20 dicas & truques de programação mais recentes |
Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site |
|
Python - Como criar o jogo Pedra, Papel, Tesoura em Python - Jogo completo em Python com código comentado |
Últimos Exercícios Resolvidos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
