 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Canvas |
Como carregar uma imagem (ou foto) no objeto Canvas do HTML5Quantidade de visualizações: 2257 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:---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
// 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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:  |
 Link para compartilhar na Internet ou com seus amigos: |
HTML5 ::: HTML5 + JavaScript ::: Geolocation API |
Como usar a API Geolocation do HTML5Quantidade de visualizações: 1709 vezes |
|
A API Geolocation foi uma das adições mais importantes ao HTML5. Por meio desta API, os usuários podem compartilhar sua localização com seus sites favoritos. Um código JavaScript pode, por exemplo, capturar sua latitude e longitude, enviar para o backend de um servidor web e permitir que algumas aplicações façam coisas tais como encontrar lojas e locais mais próximos de você ou até mesmo mostrar sua localização em um mapa. Nos dias atuais (março de 2020), a maioria dos navegadores web e dispositivos móveis (celulares, computadores de bordo de veículos, etc) dão suporte à API Geolocation. É claro que, antes de usá-la, temos que estar atentos à algumas considerações: 1) A localização mais precisa é aquela fornecida por um GPS, e este geralmente não está presente em laptops ou desktop. No entanto, alguns sistemas operacionais possuem a capacidade de obter tal localização se você estiver usando posicionamento de WI-FI e também por meio do seu endereço IP (Internet Protocol). 2) O usuário poderá se recusar a fornecer sua localização. Assim, fique atento a este fato e teste sempre a existência da API Geolocation e também a concordância do usuário antes de efetuar alguma ação crucial nas suas aplicações. 3) Alguns navegadores web restringem o acesso à API Geolocation somente em ambiente HTTPs. Fique atento a este detalhe também. Vamos agora ver um trecho de código JavaScript que verifica a existência da API Geolocation no navegador: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Testando a existência da API Geolocation</title>
</head>
<body>
<script type="text/javascript">
if(window.navigator.geolocation) {
window.alert("A API Geolocation foi encontrada.");
}
else{
window.alert("A API Geolocation não foi encontrada neste navegador.");
}
</script>
</body>
</html>
Notem que o novo objeto geolocation foi adicionado ao objeto navigator, já existente nos navegadores desde suas primeiras versões, e tudo que fizemos foi testar a existência de tal objeto. Pronto! Agora que já sabemos para que serve a API Geolocation e como verificar a existência do objeto geolocation, o passo seguinte é aprender como detectar a latitude e longitude do usuário. Nesta seção você encontrará mais dicas relacionadas a isso. |
HTML5 ::: Dicas & Truques ::: Meta Tags |
HTML5 para iniciantes - Como usar a meta tag viewport para controlar o layout de suas páginas HTMLQuantidade de visualizações: 5571 vezes |
|
Quando estamos aprendendo HTML5 e queremos desenvolver páginas web responsivas, ou design responsivo, uma das primeiras tags que temos que entender e dominar bem, é a tag viewport, incluinda com a especificação do HTML5. Mas o que é a tag viewport? Esta meta tag foi originalmente apresentada no navegador Safari Mobile, e é usada para definir a largura e escala de apresentação do conteúdo da página HTML. Dessa forma, viewport é a área da página web na qual o conteúdo é exibido para o usuário. Como sabemos, uma página web pode ser acessada por dispositivos variados. A tela do laptop é muito maior se comparada à tela de um smartphone ou tablet. A meta tag viewport é adicionada na seção <head> da página HTML e pode conter os seguintes elementos: width: É a largura do viewport virtual no dispositivo. height: É a altura do viewport virtual do dispositivo. initial-scale: É o nível de zoom quando a página é acessada. maximum-scale: É o limite máximo de zoom que pode ser aplicado à página. user-scalable: Uma flag que indica se o usuário pode ou não aplicar zoom à página. Os valores permitidos são yes ou no. Veja, por exemplo, como definir um viewport de 980px e escala inicial de zoom de 1: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <meta name="viewport" content="width=980, initial-scale=1"> No entanto, se nossa intenção é desenvolver um design responsivo, devemos passar o valor device-width para o atributo width do viewport. Isso faz com que a largura do viewport seja igual à largura do dispositivo que está acessando a página. Veja uma página HTML completa usando esta abordagem: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <html> <head> <title>Estudando HTML5</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>Java Avançado - Como obter a largura e altura da tela do seu computador em pixels usando o método getScreenSize() da classe Toolkit do Java</h1> <p>A classe Toolkit da linguagem Java nos fornece o método getScreenSize(), que retorna um objeto da classe Dimension contendo a largura e a altura da tela do nosso computador, em pixels. Veja o código Java completo para o exemplo:</p> </body> </html> Note que o elementos dentro do atributo content são separados por vírgulas, juntamente com seus valores individuais. |
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: 5479 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: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<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. |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
| Postura ética profissional Os princípios éticos que norteiam a prática profissional dos engenheiros não são definidos por uma única entidade ou indivíduo específico. Há diferentes fontes e organizações que estabelecem a conduta ética a ser seguida por esses profissionais. Assinale a alternativa que melhor apresenta essas fontes e organizações, segundo Cocian (2016): A) Organizações profissionais, legislação e regulamentações, instituições de ensino, experiência profissional. B) A Associação Mundial de Engenheiros, o Conselho de Ética, a Sociedade Internacional de Engenheiros e a Federação Internacional de Engenharia (FIE). C) Os códigos de ética redigidos pelas empresas Apple, Microsoft, Google e Amazon. D) As diretrizes éticas de partidos políticos, organizações ambientais, grupos de consumidores e clubes esportivos. E) Os princípios éticos estabelecidos por escritores famosos, celebridades, filósofos antigos e artistas renomados. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
| Vigas a flexão simples: seções retangulares O dimensionamento de vigas retangulares armadas à flexão leva em consideração a resistência do concreto à compressão e a resistência do aço à tração. Nesse caso, a viga está simplesmente armada e é composta por armadura principal e armadura construtiva. Dependendo do domínio em que a seção da viga se encontra, pode ser necessário também considerar a resistência do aço à compressão, quando a viga é composta por armadura dupla. Considere uma viga retangular de concreto com largura de 14cm, concreto C30, e que a agressividade ambiental do local é classe III. Considere também que essa viga deve resistir a uma solicitação por um momento fletor de 95,50kN.m. Nesse caso, qual é a altura mínima da viga para que não seja necessária armadura dupla? A) 35cm. B) 40cm. C) 45cm. D) 50cm. E) 55cm. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Hidrologia |
| (IDECAN - 2021 - Perito Criminal de 1ª Classe (PEFOCE)/Engenharia Civil) O aparelho utilizado para medição e registro de precipitações é o A) pluviômetro. B) fluviógrafo. C) pluviógrafo. D) limnímetro. E) limnígrafo. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Hidrologia |
| (UFT 2013) A ocorrência de desmatamentos nas margens do rio Paraíba do Sul é o principal processo responsável pelo assoreamento. Sua vegetação encontra-se bastante alterada devido às diversas formas de ocupação e uso do solo, que resultaram em processos de erosão e assoreamento. TERRA, L. et al. Conexões: Estudos de Geografia Geral e do Brasil, 2010, p. 248, vol I e II. Os trechos percorridos por um rio que correspondem respectivamente à jusante e à montante são as: A) áreas da nascente e da desembocadura do rio. B) áreas das vertentes direita e esquerda do rio. C) áreas onde os rios se encontram com o mar. D) áreas da desembocadura e da nascente do rio. E) áreas das vertentes esquerda e direita do rio. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Java |
Analise o seguinte código Javadouble a = 0.0 / 0; System.out.println(a); Qual é o resultado de sua execução? A) Infinity B) NaN C) Uma exceção java.lang.ArithmeticException: / by zero D) 0 Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
Linguagens Mais Populares |
|
1º lugar: Java |
