Hogyan hozzunk létre egy színpaletta (színválasztóban) keresztül HTML5 Canvas

Készítsen HTML5 «vászon” (az angol »Sanvas«) alkalmazások egy új trend, az ő segítségükkel, mi is létrehozhatunk egy játékot, mivel támogatja az összes fontosabb böngészők (az asztalról a mobil), és ez teszi őket hatékonyabb megoldás, umiraeschego mint a flash.

Ebben a példában HTML kód lesz nagyon minimális - minden, hogy meg kell dolgozni a színpaletta - canvas elem és helye, hogy a kiválasztott szín RGB és HEX formátumban. Ez az, amit meg kell:

Mivel fogjuk használni a háttérképet egy színpalettát, mi történt a szélessége és magassága a vászon felel meg a méretei a kép - 600 × 440 képpont. Azt is hozzá kell jQuery az oldalunkon fogjuk használni a jQuery kódot.

Az első dolog, amit meg kell tennie annak érdekében, hogy a színpaletta az, hogy a vásznon, és annak keretében ezzel a sort:

Most, hogy megvan a canvas elem és annak tartalma, tudjuk meg egy képet a vászonra háttérben. Ehhez létre kell hoznunk a kép, és ez a forrás kép URL-jét. Ha a képet feltölteni, akkor kell, hogy húzza meg a vásznon:

Ebben a részben azt kell meghatározni, hogy mi fog történni, ha rákattint bárhol a vászon, ha belegondolunk, akkor először meg kell, hogy a felhasználó kurzor pozícióját a vásznon, hogy hol kattintott. Például így:

Ezzel a két sornyi kódot, akkor láthatjuk, ha a felhasználó rákattint. Mit teszünk, hogy minden a koordinátákat, ahol a felhasználó kattintott, majd vonjuk ki abból ellensúlyozza a vásznon. Az ilyen fellépés fogja mutatni nekünk, ha a felhasználó rákattint egy helyzethez képest a vásznon.

A következő lépés az, hogy az RGB értékeket, ha a felhasználó rákattint. Ehhez meg kell használni getImageData funkciót, és csatolja az X és Y pozíció kattintással:

Most már a tárolt értékeket az R, G és B változók, de meg kell jeleníteni ezeket az információkat a felhasználónak, hogy könnyen olvasni. Ezért létre kell hozni az RGB változtatható, hogy fogja ezt a három értéket, vesszővel elválasztva, majd bemutatni őket, mint az egyik értéke beviteli mezők:

Most, hogy megvan ez a funkció csak annyit kell tennie annak érdekében, hogy nyújtson be egy HEX érték, hogy hajtsa végre a funkcióját a RBG érték, majd állítsa be a bemeneti értéket HEX szín # és a funkció már a helyén van. Ez nagyon egyszerű:

Kulcsrakész kód

FIGYELEM! Ön egy elavult böngészőt használ Internet Explorer

Ez a weboldal épül a fejlett, korszerű technológiák és nem támogatja az Internet Explorer a második és a hetedik változat.