Kanavasovellusten luominen on uusi asia, voimme jopa luoda pelejä sen kanssa, sitä tuetaan kaikissa tärkeissä selaimissa sekä työpöydällä että mobiililaitteella. Tämä tekee siitä kannattavamman ratkaisun kuin Flash.
Tässä opetusohjelmassa käytämme kangaselementtiä luomalla yksinkertainen värivalitsin, joka ei vaadi Flashia, tarvitset vain tekstieditorin ja selaimen.
Ennen kuin aloitamme, katsokaa, mitä me rakennamme tässä. Voit myös ladata lähdetiedostot tässä. Huomaa, että jos aiot testata demoa paikallisesti, sinun on käytettävä muuta selausta kuin Chromea. Chromen suojausmalli tarkoittaa, että komentosarja toimii vain verkossa.
Tässä esimerkissä HTML on hyvin vähäinen, kaikki mitä tarvitsemme, jotta värivalitsin toimisi, on kangaselementti ja jotkut paikat, joissa näytetään valittu väri RGB- ja HEX-muodossa, joten tarvitsemme vain tämän:
HEX: RGB: Koska käytämme taustakuvan värillisellä pallolla, tein kangastani kyseisen kuvan leveyden ja korkeuden, ja valitun värin arvot näkyvät syötteissä helpottamaan valintaa.
Sinun pitäisi myös lisätä jQuery sivusi, koska käytämme jQuery-koodia.
Ensimmäinen asia, joka meidän on tehtävä värivalitsimen tekemiseksi, on saada kankaalle ja sen konteksteille ja tehdä se kaikki, mitä tarvitsemme, rivi koodiksi, kuten:
var canvas = document.getElementById('canvas_picker').getContext('2d');Nyt kun meillä on kangaselementti ja sen konteksti, voimme aloittaa asettamalla kuvan taustan kankaalle. Tätä varten meidän on luotava kuvaobjekti ja kirjoitettava lähteen URL-osoite. Kun kuva on ladattu, meidän täytyy piirtää se kankaaseen:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Toistaiseksi niin hyvä, eikö?
Tämä on osa, jossa meidän on määriteltävä, mitä tapahtuu, kun napsautat jonnekin kankaalle, ja jos ajattelet sitä, sinun on ensin saatava käyttäjän kohdistimen sijainti kankaalle nähdäksesi, mistä napsautettiin, kuten:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Näillä kahdella koodirivillä näemme, mistä käyttäjä napsautti, ja mitä me teemme, on saada koordinaatit, joissa käyttäjä napsautti ja vähentää sitten siitä kankaalle siirtymän. Se kertoo meille, missä käyttäjä napsautti kankaalle sijaintia.
Seuraavana vaiheena on saada RGB-arvot paikasta, johon käyttäjä napsautti, ja tarvitsemme sen, että käytämme funktiota getImageData ja liitämme napsautuksen x ja y-aseman:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Meillä on nyt nämä arvot tallennettu R-, G- ja B-muuttujien sisällä, mutta haluamme näyttää nämä tiedot käyttäjälle tavalla, jolla he voivat helposti lukea sen, joten meidän on luotava RGB-muuttuja, joka pitää nämä kolme arvoa erotellen pilkulla ja sitten esitä tämä arvojemme joukoksi:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Ja jos testat sen nyt sinulla on jo täysin toimiva värivalitsin, joka noutaa RGB-arvon mistä tahansa napsautat, mutta jotta voisimme tehdä tämän hieman paremmin, voimme lisätä toiminnon Javascripter joka muuntaa RGB-arvot HEX-arvoiksi; toiminto on:
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);}Nyt, kun saimme tämän toiminnon, kaikki mitä tarvitsemme HEX-arvojen esittämiseksi on suoritettava toiminto RBG-arvojemme kanssa ja asetamme sitten syötteen arvo HEX-väreksi # ennen ja jo toiminnassa, joka on jo olemassa on melko yksinkertainen:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Toivon, että tällä opetusohjelmalla olet ymmärtänyt mahdollisuudet luoda sovelluksia kankaalle. Siellä on paljon kehittyneempiä sovelluksia, ihmiset jopa tekevät pelejä kangasta, joten on syytä tutkia, koska voit rakentaa hämmästyttäviä asioita sen kanssa.
Mitä muita käyttötapoja olette löytäneet Canvasille? Mitä haluaisit käyttää sitä? Kerro meille kommentit.
Esitetty kuva / pikkukuva, värikuvan kuva kautta Shutterstock.