Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Canvas

Como carregar uma imagem (ou foto) no objeto Canvas do HTML5

Quantidade de visualizações: 2436 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:

Este trecho de código ou resolução de exercício faz parte do Super Pack 12.000 Dicas e Truques de Programação e 1.500 Exercícios Resolvidos em Java, Python, VisuAlg, Portugol, Delphi, C#, C, C++, VB.NET, Golang, Pascal, Ruby, PHP, e várias outras linguagens.

Aprenda a programar resolvendo problemas do mundo real. Tudo em português, com comentários em português.

Quero Ser Apoiador(a)

O passo seguinte é adicionar um "ouvidor" de evento neste objeto Image para que ele nos avise quando a imagem estiver 100% carregada. Veja:

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:

E aqui está o código completo para o exemplo:

Ao executar a página nós teremos o seguinte resultado:

Link para compartilhar na Internet ou com seus amigos:

Veja mais Dicas e truques de HTML5

Como mover uma bola na superfície do Canvas do HTML5 na horizontal - Para a direita, para a esquerda e rebatendo

Como obter a duração de um vídeo carregado em um elemento <video> do HTML5

Como criar um relógio digital usando o Canvas do HTML5 e as funções fillText() e requestAnimationFrame()

Computação gráfica usando HTML 5 - Como usar o método lineTo() do objeto Canvas do HTML5 para desenhar retas

Programação gráfica para iniciantes - Como desenhar círculos com ou sem preenchimento usando o método arc() do objeto Canvas do HTML5

Como acessar sua webcam, obter o MediaStream retornado e usá-lo na propriedade srcObject do elemento video do HTML5

Definindo a posição atual do vídeo que está sendo executado no elemento video do HTML5

Como usar o método arc() do objeto Canvas do HTML5 para desenhar arcos, curvas e círculos

Obtendo a posição atual do vídeo que está sendo executado no elemento video do HTML5

Como definir a cor da caneta do contexto de desenho do Canvas do HTML 5 usando a propriedade strokeStyle

Dicas e truques de outras linguagens

C# - Como definir uma imagem de fundo para um formulário C# Windows Forms usando a propriedade BackgroundImage

C# - Como calcular porcentagem em C# - Como efetuar cálculos de porcentagem em C#

Java - Java MySQL - Como obter uma lista das funções de strings e caracteres suportadas pelo MySQL usando o método getStringFunctions() da interface DatabaseMetaData

PHP - Como testar se uma substring está contida em uma string usando a função strpos() do PHP

Delphi - Como verificar se uma substring está contida no início de uma string em Delphi usando a função AnsiStartsStr()

Java - Como ordenar um vetor de inteiros em ordem decrescente em Java

C# - C# Windows Forms Avançado - Como rolar as linhas de um TextBox para o fundo (parte inferior) usando a API do Windows

C# - Como definir a cor de fundo de um formulário C# Windows Forms usando a propriedade BackColor

Java - Exercício Resolvido de Java - Faça um programa que sorteie um número aleatório entre 0 e 500 e pergunte ao usuário qual é o "número mágico". O programa deverá

C# - Como retornar a quantidade de itens em uma ListBox do C# Windows Forms usando a propriedade Count

E-Books em PDF

E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas

Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.

Ver Conteúdo do E-book

E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas

Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.

Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby

Você está aqui: HTML5 ::: HTML5 + JavaScript ::: Canvas

Como carregar uma imagem (ou foto) no objeto Canvas do HTML5

Questões de Concurso para Engenharia Civil

Exercícios Resolvidos

Bancos de Dados

Questões de Concurso

Frameworks

Projetos e Códigos Fonte

Especializações

Calculadoras

Ferramentas

Todas as Linguagens, Frameworks, Biliotecas e Bancos de Dados

Compre pelo WhatsApp: +55 (062) 98553-6711

E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - Com comentários em Português

PDF COM 1.200 PÁGINAS

Apenas R$ 32,90