Html5 panza, un program de desen simplu

, formatat cu fundal albastru deschis și care conțin mai multe elemente , activabil clic:

O parte importantă a acestui element de marcare este atributul onclick . Atunci când utilizatorul face clic pe mânerul pictograma unui anumit element de culoare determină funcția changeColor (). Această funcție are doi parametri - o nouă culoare care se potrivește cu culoarea pictogramei selectate și link-ul de la elementul , pe care ați făcut clic. Codul funcției este după cum urmează:

Funcția Codul changeColor () are două obiective principale. În primul rând, stabilește proprietatea context strokeStyle la valoarea corespunzătoare noii culori. Acest lucru necesită doar o singură linie de cod. În al doilea rând, codul schimbă elementul de design , pe care a făcut clic, anexând-l într-o cutie pe care o puteți vedea ce culoare este curent. Efectuarea acest lucru necesită mai mult de lucru, după cum trebuie să urmăriți elementul de culoare , în care anterior clic pentru a elimina masca.

changeThickness Funcția () efectuează o lucrare aproape identică, dar se schimbă valoarea linewidth context în conformitate cu lățimea liniei selectate:

Codul de mai sus pregătește o pânză pentru pictură, dar este prea devreme pentru a trage. Pentru a face acest lucru, adăugați codul care realizează efectiv pictura, care se face în secțiunea următoare.

Bazându-se pe panza

procesul de desen începe atunci când utilizatorul face clic pe panza. Pentru a ține evidența atunci când se face desenul, programul utilizează isDrawing variabilă la nivel mondial, informându restul codului de program, dacă este posibil să se lucreze cu contextul desen.

Așa cum am văzut mai devreme, eveniment onmousedown este asociat cu funcția startDrawing (). Această funcție setează isDrawing variabilă, creează o nouă cale, iar apoi stabilește poziția inițială de desen, pregătind astfel panza pentru desen:

Pentru programul nostru să funcționeze corect, desenul trebuie să înceapă de la poziția curentă, și anume, în cazul în care cursorul mouse-ului atunci când utilizatorul apasă butonul din stânga. Dar sarcina de a obține coordonatele corecte ale acestui punct câteva complicat.

eveniment onmousedown oferă coordonatele cursorului mouse-ului (în termeni de proprietăți și PaginaX PaginaY. așa cum se arată în acest exemplu), dar coordonatele în ceea ce privește întreaga pagină. Pentru a calcula coordonatele corespunzătoare ale pânzei, este necesar pe coordonatele colțul din stânga sus al ferestrei browser-ului pentru a ține departe colțul din stânga sus al pânzei.

Desen real apare atunci când utilizatorul deplasează mouse-ul în timp ce țineți apăsat butonul din stânga. De fiecare dată când mutați mouse-ul, chiar și un pixel este activat eveniment onmousemove și marchează codul funcția de tragere (). Dacă variabila isDrawing este setat, codul calculează poziția curentă a pânzei (de exemplu, coordonatele punctului, care este în prezent sub cursorul mouse-ului) și apoi apelează metoda lineTo (), care adaugă calea liniei de segment corespunzătoare, apoi apel accident vascular cerebral metoda (), care trage linia:

Dacă utilizatorul continuă să se miște mouse-ul peste o funcție se numește extragere (), adăugând din nou un segment la linia deja trase. Acest segment este atât de scurt - o lungime de numai unul sau doi pixeli, că el nu arata chiar ca o linie dreaptă de la începutul desenului.

În cele din urmă, atunci când utilizatorul eliberează butonul mouse-ului, sau afișează cursorul în afara panzei, sau, respectiv, declanșată de un eveniment onmouseup onMouseOut. Ambele evenimente activa funcția stopDrawing (), care instruiește cererea de a opri desen:

În această etapă, am luat în considerare toate aspectele legate de desen:

Ne întoarcem acum la o discuție a funcțiilor de curățare pânză, sau salvați noul desen. În acest scop, sunt două butoane de pe bara de instrumente din partea de jos a pânzei. Apăsând butonul „Clear Canvas“ determină funcția clearCanvas (), care șterge complet suprafața pânzei cu ajutorul metodei clearRect contextului ():

Funcționare a salva conținutul panza este mai complicat, și vom dedica o secțiune separată pentru ea.

Salvarea conținutului Canvas

Sarcina de a salva conținutul panza necesită luarea în considerare a numeroase opțiuni. În primul rând, trebuie să decideți cum să obțineți datele modelului. Pentru a rezolva această problemă de panza oferă trei abordări posibile:

Utilizați datele URL

În această abordare, conținutul panza este transformată într-un fișier de imagine, care este apoi tradusă într-o secvență de simboluri, executate sub forma unei adrese URL. Acesta oferă un mod elegant si compact, pentru a muta datele de imagine (de exemplu, se poate transmite elementul și trimite la serverul de web). În programul nostru, desenul va folosi această abordare.

Utilizați metoda getImageData ()

Această abordare vă permite să obțineți date „brute“ pixel, care apoi pot fi manipulate în voie.

Păstrați o listă de „pași“.

De exemplu, puteți organiza o matrice care conține o listă cu toate liniile trasate pe panza. Aceste date pot fi salvate și utilizate pentru reproducerea imaginilor. Această abordare necesită mai puțin spațiu pentru stocarea imaginilor, și oferă o mai mare flexibilitate pentru a lucra mai departe cu ea.

Dar asta nu e tot. După ce a definit tipul de conținut pentru a salva, trebuie să decideți unde să salvați conținutul. Există, printre altele, următoarele opțiuni:

În fișierul de imagine. De exemplu, conținutul panza este salvat ca un format de fișier JPEG sau PNG pe hard disc al artistului. Această abordare, care este utilizat în programul nostru de desen, iar noi vom lua în considerare în continuare.

În sistemul de stocare locale.

Pe serverul Web. După transferul datelor de server web acesta din urmă le poate stoca într-un fișier sau bază de date și pentru a furniza data viitoare când un vizitator accesează pagina.

Pentru a salva conținutul panza în programul de desen funcții numite date de adresă URL (URL-ul de date) nostru. Pentru a obține URL-ul pentru datele actuale, folosim pur și simplu toDataURL panza) metoda (. Dacă apelați toDataURL) metoda (, nu trece nici un parametru, obținem o imagine în format PNG. În mod alternativ, metoda poate specifica formatul de imagine dorit:

Dar, în cazul în care browser-ul nu poate oferi formatul cerut, din nou, el va da o imagine PNG convertit într-un șir lung.

Ce este o bază de date URL-ul? Punct de vedere tehnic, acest lucru este doar un lung șir de caractere codificate Base64-algoritm, care începe cu textul: date: image / png; base64. Se pare ca un nonsens, cel puțin pentru oameni, pentru că Aceste date sunt destinate pentru înțelegerea aplicațiilor informatice, cum ar fi browserele. URL-ul pentru conținutul panza arată astfel:

Astfel, problema de date a datelor de imagine URL-ul de conversie nu prezintă nici o dificultate. Dar ce să facă în continuare cu datele URL? Puteți trimite-l la un server de web pentru stocarea pe termen lung. Un exemplu al acestei operațiuni cu ajutorul codului PHP prezentat la pagina Web HTML5: Salvarea Canvas date de imagine folosind PHP si Ajax.

Dar posibilitatea de a stoca date pe partea de client sunt oarecum limitate. Unele browsere vă permit să mergeți direct la baza de date URL. Aceasta înseamnă că următorul cod poate fi folosit pentru a merge la imaginea:

O metodă mai sigură este de a alimenta elementul de date URL , care face ca programul nostru de vopsea:

Acest cod nu este în întregime stochează datele de imagine, așa cum imaginea nu este încă salvată în fișierul. Dar este nevoie de doar un singur pas - trebuie doar să faceți clic dreapta pe imaginea miniatură în panoul de mai jos pânză și selectați comanda din meniul contextual „Salvare imagine ca“. Nu este la fel de convenabil ca descărcarea unui fișier sau caseta de dialog Salvare, dar singurul mod în care funcționează fiabil în toate browserele.