Vytváření aplikací na plátno je nová věc, můžeme s ní dokonce vytvářet hry, podporujeme ve všech hlavních prohlížečích, a to jak stolních, tak i mobilních, což je životaschopnějším řešením než použití Flash.
V tomto výukovém programu použijeme prvek plátna pro vytvoření jednoduchého výběru barev, který nevyžaduje žádný Flash, vše, co potřebujete, je textový editor a prohlížeč.
Než začneme, podívejme se, co budeme stavět tady. Můžete také stáhnout zdrojové soubory tady. Všimněte si, že pokud budete testovat demo místně, budete muset použít jiný prohlížeč než Chrome; Bezpečnostní model Chrome znamená, že skript bude fungovat pouze online.
Pro tento příklad bude HTML velmi minimální, vše, co potřebujeme k tomu, aby byl nástroj pro výběr barev fungovat, je plátkovým prvkem a nějakým místem pro zobrazení naší vybrané barvy ve formátech RGB a HEX, takže vše, co potřebujeme, je toto:
HEX: RGB: Vzhledem k tomu, že budeme používat obrázek na pozadí s barevnou paletou, udělal jsem na plátně šířku a výšku obrazu a hodnoty pro barvu selecetd se objeví na vstupy pro snadnější výběr.
Také byste měli přidat stránku jQuery, protože budeme používat nějaký jQuery kód.
První věc, kterou musíme udělat pro to, aby vybíráme barvu, je získání plátna a jeho kontextu a k tomu vše, co potřebujeme, je řada kódů, například:
var canvas = document.getElementById('canvas_picker').getContext('2d');Nyní, když máme prvek plátna a jeho kontext, můžeme začít tím, že nastavíme obrázek jako pozadí plátna. Chcete-li to udělat, musíme vytvořit objekt obrázku a vytvořit jeho zdrojovou adresu URL obrázku. Když je tento obrázek načten, musíme ho nakreslit do plátna:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Zatím je tak dobré, ne?
No, toto je ta část, kde musíme definovat, co se stane, když kliknete někde na plátně, a pokud o tom přemýšlíte, musíte nejprve získat pozici kurzoru uživatele na plátně a zjistit, kam klikli, například:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;S těmito dvěma řádky kódu můžeme vidět, kde uživatel kliknul a co děláme, je získání cordinátů tam, kde uživatel kliknul a pak odečtl od toho offset plátna. To nám řekne, kde uživatel klepal relativně k pozici plátna.
Následujícím krokem je získat hodnoty RGB místa, na které uživatel kliknul, a pro to potřebujeme použít funkci getImageData a připojit polohu x a y kliknutí:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Nyní máme tyto hodnoty uložené uvnitř proměnných R, G a B, ale chceme tyto informace zobrazit uživateli tak, aby si je mohli snadno přečíst, takže musíme vytvořit proměnnou RGB, která drží tyto tři hodnoty oddělené čárkami a poté uveďte to jako hodnotu jednoho z našich vstupních polí:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});A pokud si to vyzkoušíte, máte již plně funkční vyberač barev, který načte hodnotu RGB kdekoli kliknete, ale aby to bylo trochu lepší, můžeme přidat funkci z Javascripter který převádí hodnoty RGB na hodnoty HEX; funkce je:
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);}Nyní, když máme tuto funkci, musíme udělat vše pro to, abychom představili hodnoty HEX, je to, že provedeme funkci s našimi hodnotami RBG a pak nastavíme hodnotu vstupu na HEX barvu s hodnotou # před a funkce již na místě. je celkem jednoduché:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Doufám, že s tímto tutoriálem jste si uvědomili, že existuje potenciál při vytváření aplikací s plátnem. Tam jsou mnohem pokročilejší aplikace tam, lidé jsou dokonce dělat hry s plátnem, takže je to věc prozkoumat, protože s ním můžete postavit některé úžasné věci.
Jaké jiné použití jste použili pro Canvas? Na co byste jej chtěli využít? Dejte nám vědět v komentářích.
Doporučený snímek / náhled, obrázek pro výběr barev přes Shutterstock.