Canvas obiect
Obiectul Canvas este nou în HTML5.
HTML5 <canvas> tag - ul este folosit pentru a desena grafice, pe zbor, cu JavaScript.
Accesați un obiect Canvas
Puteți accesa un <canvas> Element folosind getElementById() :
Crearea unui obiect Canvas
Puteți crea un <canvas> elementul utilizând document. createElement() document. createElement() Metoda:
Notă: <canvas> elementul nu are abilități de desen proprii (acesta este doar un container pentru grafica) - trebuie să utilizați un script pentru a desena grafica.
getContext() metoda returneaza un obiect care oferă metode și proprietăți pentru desen pe panza.
Această referință va acoperi proprietățile și metodele de getContext("2d") obiect, care poate fi folosit pentru a desena text, linii, cutii, cercuri, și multe altele - pe panza.
Culori, stiluri și umbre
| Proprietate | Descriere |
|---|
| fillStyle | Setează sau returnează culoarea, gradientul, sau modelul utilizat pentru a umple desenul |
| strokeStyle | Setează sau returnează culoarea, gradientul sau model utilizat pentru accidente vasculare cerebrale |
| shadowColor | Setează sau returnează culoare pentru a utiliza pentru umbre |
| shadowBlur | Setează sau returnează nivelul blur pentru umbre |
| shadowOffsetX | Setează sau returnează distanța orizontală umbra de forma |
| shadowOffsetY | Setează sau returnează distanța pe verticală a umbrei din forma |
Stiluri de linie
| Proprietate | Descriere |
|---|
| lineCap | Setează sau returnează stilul de capace pentru o linie |
| lineJoin | Setează sau returnează tipul de colț a creat, atunci când două linii îndeplinesc |
| lineWidth | Setează sau returnează lățimea liniei curente |
| miterLimit | Setează sau returnează lungimea maximă de tăiere oblică |
dreptunghiuri
| Metodă | Descriere |
|---|
| rect() | Creează un dreptunghi |
| fillRect() | Deseneaza o "filled" dreptunghi |
| strokeRect() | Deseneaza un dreptunghi (no fill) |
| clearRect() | Golește pixeli specificate într-un anumit dreptunghi |
Căi
| Metodă | Descriere |
|---|
| fill() | Umple desenul curent (path) |
| stroke() | De fapt, atrage calea pe care ați definit |
| beginPath() | Începe o cale, sau resetează calea curentă |
| moveTo() | Mută calea către punctul specificat în pânză, fără a crea o linie |
| closePath() | Creează o cale de la punctul curent înapoi la punctul de plecare |
| lineTo() | Adaugă un nou punct și creează o linie de la acel punct la ultimul punct specificat în pânza |
| clip() | Clipuri o regiune de orice formă și dimensiune din original panza |
| quadraticCurveTo() | Creează o curbă Bezier pătratică |
| bezierCurveTo() | Creează o curbă Bezier cubică |
| arc() | Creează un arc / curba (used to create circles, or parts of circles) |
| arcTo() | Creează un arc / curba între două tangentele |
| isPointInPath() | Returnează true dacă punctul specificat este în calea curentă, în caz contrar fals |
transformări
| Metodă | Descriere |
|---|
| scale() | Scalează desenul curent mai mare sau mai mică |
| rotate() | Rotește desenul curent |
| translate() | Remaps (0,0) , poziția pe panza |
| transform() | Înlocuiesc matricea de transformare curentă pentru desen |
| setTransform() | Reseteazã curent transforma în matricea de identitate. Apoi , se execută transform() |
Text
| Proprietate | Descriere |
|---|
| font | Setează sau returnează proprietățile fontului curent pentru conținutul textului |
| textAlign | Setează sau returnează alinierea curentă pentru conținutul textului |
| textBaseline | Setează sau returnează linia de bază a textului curent utilizat la elaborarea textului |
| Metodă | Descriere |
|---|
| fillText() | Atrage "filled" text pe panza |
| strokeText() | Atrage text pe panza (no fill) |
| measureText() | Returnează un obiect care conține lățimea textului specificat |
Desen de imagine
| Metodă | Descriere |
|---|
| drawImage() | Desenează o imagine, panza sau video pe pânză |
Pixel Manipularea
| Proprietate | Descriere |
|---|
| width | Returnează lățimea unui obiect ImageData |
| height | Returnează înălțimea unui obiect ImageData |
| data | Returnează un obiect care conține datele de imagine ale unui obiect ImageData specificat |
| Metodă | Descriere |
|---|
| createImageData() | Creează un obiect nou, ImageData gol |
| getImageData() | Returnează un obiect ImageData care copiază datele de pixeli pentru dreptunghiul specificat pe o pânză |
| putImageData() | Plasează datele de imagine (from a specified ImageData object) de (from a specified ImageData object) înapoi pe pânză |
compunere
| Proprietate | Descriere |
|---|
| globalAlpha | Setează sau returnează alfa sau transparență valoarea curentă a desenului |
| globalCompositeOperation | Setează sau returnează modul în care sunt desenate o noua imagine pe o imagine existentă |
Alte
| Metodă | Descriere |
|---|
| save() | Salvează starea de contextul actual |
| restore() | Returnează starea cale salvată anterior și atributele |
| createEvent() | |
| getContext() | |
| toDataURL() | |
Proprietăți standard și evenimente
Obiectul panza susține , de asemenea , standard de proprietăți și evenimente .
Pagini similare
Tutorial HTML: HTML5 Canvas
Referință HTML: HTML <canvas> tag - ul