 |
|
Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Canvas |
Como carregar uma imagem (ou foto) no objeto Canvas do HTML5Quantidade de visualizações: 2312 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 ::: 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: 5572 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. |
HTML5 ::: HTML5 + JavaScript ::: Geolocation API |
Como retornar a localização do usuário usando o método getCurrentPosition() da API Geolocation do HTML5Quantidade de visualizações: 2434 vezes |
O método getCurrentPosition() da API Geolocation do HTML5 nos permite obter tanto a latitude quanto a longitude do usuário que está acessando nossas páginas web. A forma mais simples deste método requer apenas uma função JavaScript que receberá o objeto de coordenadas. Veja o trecho de código a seguir: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<html>
<head>
<title>Obtendo a latitude e longitude usando a API
Geolocation</title>
</head>
<body>
<script type="text/javascript">
function mostrarPosicao(posicao) {
document.writeln("<h1>Latitude: " + posicao.coords.latitude +
"; Longitude: " + posicao.coords.longitude + "</h1>");
}
// não se esqueça de testar se o navegador web suporta a API
// Geolocation do HTML5
if(window.navigator.geolocation) {
// chamamos o método getCurrentPosition() fornecendo a função
// JavaScript que receberá o objeto de coordenadas
navigator.geolocation.getCurrentPosition(mostrarPosicao);
}
else{
document.writeln("A API Geolocation foi encontrada.");
}
</script>
</body>
</html>
Ao executar este trecho de código, a primeira coisa que você verá é uma mensagem do navegador avisando que o site a partir do qual o código está sendo executado quer saber sua localização. A mensagem exibirá os botões Permitir ou Bloquear. Se você clicar no botão Permitir, a latitude e longitude serão escritas no navegador: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- Latitude: -16.7143838; Longitude: -49.2327622 É claro que, se você estiver executando o código em um laptop ou desktop, o resultado será muito diferente daquele mostrado no seu celular. O motivo é que, em geral, um GPS não está disponível nos laptops e desktops. Por essa razão, o navegador vai obter sua localização usando posicionamento de WI-FI e também por meio do seu endereço IP (Internet Protocol). |
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: 5829 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. |
Veja mais Dicas e truques de HTML5 |
Dicas e truques de outras linguagens |
|
C - Como escrever uma função concat() que reproduz a funcionalidade da função strcat() da linguagem C |
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 |
