 |
|
Você está aqui: HTML5 ::: Canvas Element ::: Linhas |
Computação gráfica usando HTML 5 - Como usar o método lineTo() do objeto Canvas do HTML5 para desenhar retasQuantidade de visualizações: 2699 vezes |
|
O método lineTo() do objeto Canvas do HTML5 nos permite desenhar linhas retas entre um ponto x e um ponto y. Para isso, usamos o método moveTo() para mover a caneta (ou pena) de desenho para um coordenada x, y e a partir deste ponto nós especificamos as coordenadas x, y para a outra extremidade da linha. O trecho de código a seguir desenha uma linha saindo das coordenadas x = 20, y = 20 e chegando até x = 300, y = 150. Veja: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- contexto.moveTo(20, 20); // move a caneta para x, y contexto.lineTo(300, 150); // coordenadas x, y E aqui estão os códigos HTML e JavaScript para o exemplo completo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>O objeto Canvas do HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
contexto.beginPath(); // inicia ou reseta o caminho anterior
contexto.moveTo(20, 20); // move a caneta para x, y
contexto.lineTo(300, 150); // coordenadas x, y
contexto.stroke(); // finaliza o desenho
</script>
</body>
</html>
Ao abrir esta página HTML nós teremos o seguinte resultado:  |
 Link para compartilhar na Internet ou com seus amigos: |
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: 5835 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: 5575 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 ::: Canvas |
Como carregar uma imagem (ou foto) no objeto Canvas do HTML5Quantidade de visualizações: 2313 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:  |
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 |
