Como deixar imagem redonda de um CANVAS com HTML 5

Como deixar imagem redonda de um CANVAS com HTML 5

Neste post mostro como deixar uma imagem dentro de um círculo com sombra usando canvas do HTML5 !

Como deixar uma imagem redonda e com sombra em CSS

Como deixar uma imagem redonda e com sombra em CSS

Fazendo uma imagem ficar dentro de um círculo em CSS

Resolvendo o problema No 'Access-Control-Allow-Origin' header is present on the requested resource.

Como permitir acesso a outra url - Cross Origin Resource Sharing (CORS)

Como instalar o Windows 10 IoT no Raspberry usando o Windows 7

Como instalar Windows 10 no Raspberry Pi 2

Lucene, Solr, Mysql e outras bruxarias

Uma breve explicação sobre fulltext search e onde usar.

Programando Python usando Eclipse com PyDev

Programando Python usando Eclipse com PyDev

Eclipse como EDE para programar em Python !

Como desenvolver em Python usando o Netbeans 7.4

Como desenvolver em Python usando o Netbeans 7.4

Programando em python usando o netbeans como IDE

Criatividade é saber esconder suas fontes

Criatividade, nada mais do que do que pegar idéias existentes, junta-las, e modifica-las.

Tudo é um Remix (Legendado)

Tudo é um Remix (Legendado)

O que é criatividade? Copiar, transformar e combinar.

Configurando um Servidor com Nginx e Django - Juntando Tudo - Parte Final

Integrar nginx e django. Ultima parte.

Veiculo Guiado a Laser - LGV (Laser Guided Vehicle)

Veiculo Guiado a Laser - LGV (Laser Guided Vehicle)

Desenvolvimento do algoritmo de controle de direção de LGV (um AGV guiado a laser)

Configurando um Servidor com Nginx e Django - Parte 2

Configurando um Servidor com Nginx e Django - Parte 2

Instalando o Django

Como User Experience pode melhorar seu produto?

Como User Experience pode melhorar seu produto?

User Experience (Design Centrado no Usuário, ou Experiência do Usuário) é um termo usado quando se desenvolve produtos, sistemas ou serviços focado em pessoas, envolvendo fatores humanos no projeto.

Configurando um Servidor com Nginx e Django

Configurando um Servidor com Nginx e Django

Este post é o inicio de uma série de como configurar um servidor usando o nginx como proxy reverso e o django como servidor de aplicação.

SISTEMA DE NAVEGAÇÃO CIRÚRGICA

SISTEMA DE NAVEGAÇÃO CIRÚRGICA

Também chamada de “Cirurgia Guiada por Computador”, a navegação cirúrgica consiste em um sistema que gera um modelo virtual 3D do paciente para guiamento de instrumentos cirúrgicos de maneira precisa e em tempo real, orientando o médico no momento da cirurgia.

O FACEBOOK VAI ACABAR… E VOCÊ?

O FACEBOOK VAI ACABAR… E VOCÊ?

Recentemente, uma onda de notícias surgiu na internet: O fim do Facebook até 2020.

E QUANDO DOIS CHATBOTS SÃO COLOCADOS PARA CONVERSAR?

Chatbot são programas de computadores que tentam manter o dialogo com pessoas reais utilizando linguagem natural. É um dos desafios da Inteligencia Artificial.

TRACKING POR COR COM WEBCAM

Utiliza segmentação de imagem para extrair da imagem o ponto de interesse, no caso o ponto vermelho do laser. Envia controle via porta paralela para os servos que controlam a posição webcam. Usa Video4Linux e foi desenvolvido em C na plataforma Linux.

RASTREIO DE MOVIMENTO DE PESSOAS EM TEMPO REAL

Protótipo criado para testar a viabilidade de implementação de rastreio de comportamento de consumidores em lojas de departamentos. Utiliza múltiplas câmeras posicionadas em pontos diferentes do espaço. Plataforma Linux, desenvolvido em C usando v4l2 e placa de captura de video geovision gv800.

PENDRIVE WIRELESS BLUETOOTH

Protótipo com memória SD que poderia ser conectada via USB (como um pendrive comum) ou via Bluetooth






Como deixar imagem redonda de um CANVAS com HTML 5

___

Em outro post mostrei como deixar uma imagem redonda e com sombra usando CSS, clique aqui para ver como fazer isso.


Abaixo temos um exemplo de como fazer isso em HTML5, usando canvas.

    <canvas id="leaf" width="222" height="222"></canvas>

    <script>
        var canvas= document.getElementById('leaf');
        var context = canvas.getContext('2d');
        
        var imageObj = new Image();
        
        imageObj.onload = function()
        {
            // chamamos o metodo depois de carregar.
            
            // ajustamos o ratio da imagem.
            var hRatio = canvas.width  / imageObj.width    ;
               var vRatio =  canvas.height / imageObj.height  ;
               var ratio  = Math.max ( hRatio, vRatio );
               var centerShift_x = ( canvas.width - imageObj.width*ratio ) / 2;
               var centerShift_y = ( canvas.height - imageObj.height*ratio ) / 2;  
               context.clearRect(0,0,canvas.width, canvas.height);
        
            // mudamos o estilo da sombra.
            context.shadowColor = '#555';
            context.shadowOffsetX = 3;
            context.shadowOffsetY = 3;
            context.shadowBlur    = 5;

            // desenhamos o circulo.    
            context.fillStyle   = 'red';
            context.beginPath();
            context.arc(canvas.width/2,canvas.height/2, (canvas.width/2)-10, 0, Math.PI*2,true); // you can use any shape
            context.fill();

            // agora clipamos a região, e tudo após o clip fica dentro dele.
            context.clip();
            context.drawImage(imageObj, 0,0, imageObj.width, imageObj.height, centerShift_x,centerShift_y,imageObj.width*ratio, imageObj.height*ratio); 

        };

        imageObj.src = "http://www.cosy.sbg.ac.at/~pmeerw/Watermarking/lena_color.gif ";
       
        
    </script>

RESULTADO

o resultado é igual ao usando CSS !

imagem redonda com sombra usando html css