Criar aplicativos de tela é a novidade, podemos até criar jogos com ele, ele é suportado em todos os principais navegadores, tanto de desktop como de dispositivos móveis, e isso torna a solução mais viável do que usar o Flash.
Neste tutorial, usaremos o elemento canvas para criar um seletor de cores simples que não requer nenhum Flash. Tudo o que você precisará é de um editor de texto e de um navegador.
Antes de começarmos, dê uma olhada no que vamos construir Aqui. Você também pode baixar os arquivos de origem Aqui. Observe que, se você for testar a demonstração localmente, precisará usar um navegador diferente do Chrome. O modelo de segurança do Chrome significa que o script funcionará apenas online.
Para este exemplo, o HTML será muito mínimo, tudo o que precisamos para que o seletor de cores funcione é um elemento de tela e algum lugar para mostrar nossa cor selecionada nos formatos RGB e HEX, então tudo que precisamos é o seguinte:
HEX: RGB: Como usaremos uma imagem de fundo com a paleta de cores, fiz a minha tela a largura e a altura dessa imagem e os valores para a cor selecionada aparecerão nas entradas para facilitar a seleção.
Você também deve adicionar jQuery à sua página, pois usaremos algum código jQuery.
A primeira coisa que precisamos fazer para fazer o seletor de cores funcionar é pegar a tela e seu contexto e fazer tudo o que precisamos é de uma linha de código, da seguinte forma:
var canvas = document.getElementById('canvas_picker').getContext('2d');Agora que temos o elemento canvas e seu contexto, podemos começar definindo a imagem como o plano de fundo da tela. Para fazer isso, precisamos criar um objeto de imagem e tornar sua origem o URL da imagem. Quando esta imagem foi carregada, precisamos desenhá-la na tela:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Até aí tudo bem, certo?
Bem, essa é a parte em que precisamos definir o que acontece quando você clica em algum lugar na tela e, se pensar nisso, primeiro é necessário obter a posição do cursor do usuário na tela para ver onde eles clicaram, assim:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Com essas duas linhas de código, podemos ver onde o usuário clicou e o que estamos fazendo é obter os cordinates de onde o usuário clicou e depois subtrair o deslocamento da tela. Isso nos dirá onde o usuário clicou em relação à posição da tela.
Nosso próximo passo é obter os valores RGB do lugar onde o usuário clicou e para isso precisamos usar a função getImageData e anexar a posição xey do clique:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Agora temos esses valores armazenados dentro de variáveis R, G e B, mas queremos exibir essas informações para o usuário de uma maneira que possam facilmente lê-lo, então precisamos criar uma variável RGB que mantenha esses três valores separados por vírgulas e depois apresentar isso como o valor de um dos nossos campos de entrada:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});E se você testá-lo agora, você já tem um seletor de cores totalmente funcional que recupera o valor RGB de qualquer lugar em que você clicar, mas para tornar isso um pouco melhor, podemos adicionar uma função de Javascripter que converte valores RGB em valores HEX; a função é:
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}function toHex(n) {n = parseInt(n,10);if (isNaN(n)) return "00";n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);}Agora que temos essa função, tudo o que precisamos fazer para apresentar os valores HEX é executar a função com nossos valores RBG e, em seguida, definir o valor da entrada para ser a cor HEX com um # antes e com a função já implementada é bem simples:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Espero que com este tutorial você tenha percebido o potencial que existe na criação de aplicativos com canvas. Existem aplicativos muito mais avançados por aí, as pessoas estão até fazendo jogos com tela, então é uma coisa para explorar, porque você pode construir coisas incríveis com ele.
Que outros usos você encontrou para o Canvas? O que você gostaria de poder usá-lo? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem do seletor de cores via Shutterstock.