segunda-feira, 24 de setembro de 2012

HTML5 Canvas, alterar a cor ao clicar

Conforme o título desta postagem o meu objetivo será alterar a cor de um objeto desenhado em um Canvas do HTML5 após realizar um click sobre ele. Para isso irei utilizar o HTML5 Canvas, javascript/jquery e algum plugin do tipo Color Picker em Jquery que irei escolher nos próximos dias. Como ponto de partida encontrei este site http://www.pageresource.com/html5/canvas-interactive-tutorial/ ele ensina os fundamentos necessários sobre o CANVAS.

Para melhorar ainda mais a brincadeira encontrei uma biblioteca fantástica chamada kineticjs. Este é o link http://kineticjs.com/ com a ajuda deste plugin foi bastante fácil. Consegui criar um Canva com um círculo e coloquei também um Color Picker, chamado de Rudimentary jQuery color picker, o demo dele está aqui. O teste funciona exatamente como eu queria. Clique em uma cor para selecioná-la e depois clique no circulo que ele irá mudar para a cor selecionada.

Veja qual o resultado do meu teste:


Nenhum comentário:

Postar um comentário