Nilalaman
- 01. Pagkakaibigan sa elemento ng canvas
- 02. Suporta ng browser para sa canvas
- 03. Ang konteksto ng pag-render ng 2d
- 04. Ang sistema ng coordinate
- 05. Pag-access sa 2d rendering system
- 06. Pagguhit ng pangunahing mga hugis at linya
- 07. Mga Linya
- 08. Mga Lupon
- 09. Estilo
- 10. Pagbabago ng lapad ng linya
- 11. Tekstong pagguhit
- 12. Binubura ang canvas
- 13. Ang lapad / taas ng bilis ng kamay
- 14. Ang paggawa ng canvas punan ang browser window
- 15. Buod
- Nagustuhan ito? Basahin ang mga ito!
- Kailangan ng kaalaman: Pangunahing JavaScript at HTML5
- Kinakailangan: jQuery
- Oras ng Proyekto: 1-2 oras
- Suporta ng file
Ang sipi na ito ay Kabanata 3 ng Foundation HTML5 Canvas: Para sa Mga Laro at Aliwan ni Rob Hawkes.
Sa ngayon ay mayroon ka nang magandang ideya tungkol sa kung ano ang canvas at kung bakit ito ay isang kamangha-manghang bahagi ng HTML5. Sa artikulong ito, titingnan namin nang maayos ang mga tampok ng canvas ng HTML5, mula sa pag-alam kung paano talaga ito makuha sa isang dokumento ng HTML hanggang sa pagguhit ng mga hugis at iba pang mga uri ng mga bagay dito. Titingnan din namin kung paano baguhin kung paano iginuhit ang mga hugis at bagay sa canvas ng HTML5, pati na rin ang pag-alam kung paano ito buburahin. Sa wakas, magtatapos kami sa isang halimbawang ipinapakita sa iyo kung paano gumawa ng canvas ng parehong laki ng window ng browser, isang mahalagang kasanayan na mayroon para sa pagbuo ng mga nakaka-engganyong laro. Inaasahan kong sa pagtatapos ng tutorial na ito na sa tingin mo ay mas nasasabik ka tungkol sa HTML5 canvas at ang mga posibilidad na magbukas ito sa harap mo.
01. Pagkakaibigan sa elemento ng canvas
Tulad ng video at audio, ang elemento ng HTML5 canvas ay gumagamit ng ganap na walang panlabas na mga plug-in o voodoo upang magawa ang bagay nito. Ang kailangan mo lang ay ilang HTML at isang pagwiwisik ng JavaScript sa kagandahang-loob ng 2d na konteksto ng pag-render ng API. Huwag mag-alala kung wala kang bakas kung ano ang 2d rendering konteksto API ngayon - magiging dalubhasa ka rito.
Ang paggamit ng elemento ng canvas ay simple - at ang ibig kong sabihin talaga, Talaga simple Ang sumusunod na code ay ang kailangan mo lamang upang makapagsimula dito:
lapad ng canvas = "500" taas = "500">
! - Ipasok ang nilalaman ng fallback dito ->
/ canvas>
Ipagpalagay ko na dapat akong maging matapat at sasabihin sa iyo na hindi ito talaga gumagawa ng anumang kamangha-manghang. Ang ginagawa lang nito ay lumikha ng isang bagong elemento ng blangko na canvas, ngunit hindi mo pa makikita ang anumang bagay dahil wala kang nagawa sa konteksto ng pag-render ng 2d. Makakapunta kami sa pagguhit ng mga bagay sa canvas sa ilang sandali, na kung saan ay simple din.
Sa ngayon, mahalagang tandaan ang lapad at taas ginamit ang mga katangian kapag lumilikha ng elemento ng canvas. Ang mga katangiang ito ay malinaw na tumutukoy sa laki ng elemento ng canvas, na kung saan ay tumutukoy sa laki ng konteksto ng pag-render ng 2d. Nang walang pagtukoy ng isang sukat tulad nito ang elemento ng canvas at ang 2d na konteksto ng pag-render ay maitatakda sa default na lapad at taas ng 300 ng 150, ayon sa pagkakabanggit. Sa kalaunan sa kabanatang ito titingnan namin ang mga paraan upang lumikha ng isang elemento ng canvas na binabago ang laki nang pabagu-bago at pinunan ang buong window ng browser.
Tandaan: Ang posisyon ng elemento ng canvas ng HTML5 ay tinukoy ng lokasyon nito sa loob ng iyong dokumento sa HTML. Maaari itong ilipat sa paligid gamit ang CSS kung kinakailangan, tulad ng ibang mga elemento ng HTML.
02. Suporta ng browser para sa canvas
Sinusuportahan ng karamihan sa mga modernong browser ang elemento ng canvas ng HTML5 at ang karamihan ng mga tampok nito, ngunit hindi nakakagulat na ang Internet Explorer ay hindi, kahit papaano ay hindi sa anumang bersyon nang mas maaga kaysa sa Internet Explorer 9. Kung masaya ka sa katotohanang ito ng buhay , pagkatapos ay maaari kang maglagay ng isang naaangkop na mensahe sa fallback na nilalaman para sa elemento ng canvas na nagpapahintulot sa mga mahihirap na gumagamit ng IE na malaman na dapat silang mag-upgrade. Ang iba pang pagpipilian ay ang paggamit ng kamangha-manghang script ng ExplorerCanvas, na binuo ng ilang mga boffins sa Google. Ang kagandahan ng pamamaraang ito ay kailangan mo lamang isama ang isang script sa iyong web page at gagana ang elemento ng canvas sa mga browser ng Internet Explorer bago ang bersyon 9.
Kung ito ay isang bagay na interesado ka dapat mong i-download ang script mula sa website ng ExplorerCanvas at sundin ang mga tagubilin para sa pag-install.
03. Ang konteksto ng pag-render ng 2d
Ang elemento ng canvas ay hindi ang cool na bahagi ng canvas sa lahat; ang pagkilala na iyon ay nahuhulog sa konteksto ng pag-render ng 2d, ang piraso ng kahanga-hangang gumuhit ka ng ganap sa lahat ng bagay. Ang layunin ng elemento ng canvas ay upang kumilos bilang isang pambalot sa paligid ng konteksto ng pag-render ng 2d, na bibigyan ka ng lahat ng mga kinakailangang pamamaraan at makatas na pag-andar upang gumuhit at manipulahin ito. Napakahalaga na maunawaan ito, kaya't linawin ko ito: gumagalaw ka sa konteksto ng pag-render ng 2d, hindi sa elemento ng canvas. Ina-access mo at ipinapakita ang konteksto ng pag-render ng 2d sa pamamagitan ng elemento ng canvas. Hindi ko inaasahan na magkakaroon ito ng kumpletong katuturan, ang aking pag-asa ay ang mga bagay ay malilinaw nang kaunti kapag na-stuck ka sa paggamit ng canvas para sa iyong sarili.
04. Ang sistema ng coordinate
Ang konteksto ng pag-render ng 2d ay isang karaniwang platform ng pagguhit na nakabatay sa screen. Tulad ng iba pang mga 2d platform, gumagamit ito ng isang patag na Cartesian coordinate system na may pinagmulan (0, 0) sa kaliwang tuktok. Ang paglipat sa kanan ay tataas ang x halaga, at ang paglipat pababa ay tataas ang halagang y. Ang pag-unawa kung paano gumagana ang sistema ng coordinate ay mahalaga kung nais mong magkaroon ng mga bagay na iguhit sa tamang lugar.
Ang isang solong yunit sa coordinate system ay karaniwang katumbas ng 1 pixel sa screen, kaya ang posisyon (24, 30) ay 24 pixel pakanan at 30 pixel pababa. Mayroong ilang mga okasyon kung saan ang isang yunit sa coordinate system ay maaaring katumbas ng 2 mga pixel, tulad ng mga mataas na pagpapakita ng kahulugan, ngunit ang pangkalahatang tuntunin ng hinlalaki ay ang 1 coordinate unit na katumbas ng 1 screen pixel.
05. Pag-access sa 2d rendering system
Walang point faffing sa paligid ng pagsubok na ipaliwanag ang lahat ng ito sa mga salita kapag nagsimula na lamang kaming gumamit nito. Kaya't gawin natin iyan sa pamamagitan ng paglikha ng isang pangunahing HTML web page na may walang laman na elemento ng canvas:
! DOCTYPE html>
html>
ulo>
pamagat> Pag-aaral ng mga pangunahing kaalaman sa canvas / pamagat>
meta charset = "utf-8">
script type = "text / javascript" src = "http: //ajax.googleapis.com
/ajax/libs/jquery/1/jquery.min.js "> / script>
script type = "text / javascript">
$ (dokumento). handa na (pagpapaandar () {
});
/ script>
/ ulo>
katawan>
canvas id = "myCanvas" width = "500" taas = "500">
! - Ipasok ang nilalaman ng fallback dito ->
/ canvas>
/ katawan>
/ html>
Hindi ka makakakita ng anuman kung patakbuhin mo ito sa kinatatayuan nito, kaya't i-access natin ang konteksto ng pag-render ng 2d upang makapagsimula kaming gumuhit ng mga bagay. Ilagay ang sumusunod sa loob ng pahayag ng jQuery, tulad ng ginawa namin sa nakaraang mga halimbawa ng JavaScript:
var canvas = $ ("# myCanvas");
var konteksto = canvas.get (0) .getContext ("2d");
Ang ginagawa lang namin dito ay ang pagtatalaga ng elemento ng canvas sa isang variable pagkatapos italaga ang konteksto ng pag-render ng 2d sa isa pang variable sa pamamagitan ng pagtawag sa getContext pamamaraan Dapat kong ipahiwatig na, dahil gumagamit kami ng jQuery, kailangan naming tawagan ang paraan ng pagkuha upang makakuha kami ng pag-access sa DOM para sa elemento ng canvas, mula doon mayroon kaming access sa canvas getContext pamamaraan Hindi ako mag-aalala ng sobra tungkol sa pagsubok na maunawaan kung bakit: magkaroon ng kamalayan na ang pamamaraan ng pagkuha ay walang kinalaman sa mismong canvas mismo.
Ngayon mayroon kaming isang variable na naglalaman ng konteksto ng pag-render ng 2d maaari kaming magsimula upang gumuhit ng mga bagay. Nakatutuwang oras! Idagdag ang sumusunod na linya pagkatapos ideklara ang variable ng konteksto:
konteksto.fillRect (40, 40, 100, 100);
Kung i-refresh mo ang pahina makikita mo ang isang kamangha-manghang nangyari; isang itim na parisukat ang lumitaw!
Ginuhit mo lang ang iyong unang elemento gamit ang canvas. Masarap ang pakiramdam, hindi ba? Ang parisukat ay itim dahil iyon ang default na kulay ng mga elemento na iginuhit sa canvas; titingnan namin kung paano gumamit ng ibang bagay maliban sa default na kulay sa ibang pagkakataon sa kabanatang ito.
06. Pagguhit ng pangunahing mga hugis at linya
Tulad ng nakikita mo, ang pagguhit ng isang parisukat ay medyo prangka; ito ay isang linya lamang ng code, ang punan pamamaraan:
konteksto.fillRect (40, 40, 100, 100);
Ang halatang bagay na mapapansin mo ay ang pamamaraan ay tinawag punan at hindi punan angSquare. Sigurado ako na alam na ng karamihan sa iyo na ang isang parisukat ay talagang isang rektanggulo na may mga gilid ng parehong haba, ngunit para sa mga hindi, ang isang parisukat ay talagang isang rektanggulo na may mga gilid ng parehong haba!
Mayroong apat na argumento na kinakailangan upang lumikha ng isang rektanggulo. Ang unang dalawa ay ang (x, y) mga halaga ng coordinate para sa pinagmulan ng parisukat (tuktok na kaliwang sulok nito), at ang huling dalawa ay ang lapad at taas ng rektanggulo. Ang lapad ng isang rektanggulo ay iginuhit sa kanan ng (x, y) posisyon, at ang taas ng rektanggulo ay iginuhit pababa mula sa (x, y) posisyon. Maaari mong makita kung bakit mahalagang malaman kung paano gumagana ang sistema ng coordinate, kung hindi man ay maaaring ipinapalagay mong ang taas ay gumuhit paitaas mula sa (x, y) posisyon. Ang punan ang pamamaraan ay maaaring muling maisulat tulad nito upang mailarawan ang mga argumento:
konteksto.fillRect (x, y, lapad, taas);
Para sa kapakanan ng kalinawan, baguhin ang lapad na halaga ng aming parisukat sa 200, i-save ang file, at i-refresh ang pahina.
Ano ang isang sorpresa, ito ay isang rektanggulo. At upang iguhit ang rektanggulo sa ibang posisyon? Yup, baguhin lamang ang (x, y) mga halaga ng posisyon. Halimbawa, isang x posisyon na 200 at isang y posisyon na 300.
Ito ang kagandahan ng canvas; nakakatawang madaling manipulahin ang mga bagay na iginuhit mo, binabago mo lang ang mga halaga ng isang pares ng mga argumento.
Tandaan: Maaaring hindi ito halata, ngunit kung gumuhit ka ng isang bagay na may pinagmulang punto na lampas sa mga sukat ng elemento ng canvas, hindi ito lilitaw sa screen. Ang mga hugis lamang na iginuhit na may pinagmulan, o ilang bahagi ng hugis sa loob ng elemento ng canvas ang makikita mo.
Sa tabi punan ay ang strokeRect pamamaraan, ang masamang kambal. Samantalang punan gumuhit ng isang rektanggulo at pinunan ito ng isang kulay (sa aming kaso itim), ang strokeRect ang pamamaraan ay gumuhit ng isang rektanggulo at hinahampas ito. Hindi yan sasabihin strokeRect binibigyan ito ng isang nakapapawing pagod na pat gamit ang kamay nito (hindi ito magiging isang masamang kambal kung ito ay napakaganda); nangangahulugan ito na ang balangkas ng rektanggulo ay may isang linya na iginuhit sa paligid nito. Kung binago mo ang punan halimbawang gagamitin strokeRect sa halip makikita mo ang ibig kong sabihin.
Ang rektanggulo mayroon na ngayong isang balangkas; mabisa itong guwang. Ngayon ito ay masaya at lahat, ngunit paano ang subukan namin ang isang bagay na medyo mas malakas ang loob, tulad ng isang ganap na linya? Bakit hindi.
07. Mga Linya
Ang mga linya ay nilikha ng kaunting pagkakaiba sa mga hugis. Talagang kilala sila bilang mga landas. Upang lumikha ng isang simpleng landas, kailangan mo munang tawagan ang simulanPath paraan sa konteksto ng pag-render ng 2d, na mabisang nagsasabing, "maghanda ka, magsisimula na kaming gumuhit ng isang landas." Ang susunod na pamamaraan upang tumawag ay ilipatTo, na nagtatakda ng (x, y) pinagmulan ng daang malapit na tayong iguhit. Kasunod nito ay isang tawag sa linya kasama ang (x, y) ng patutunguhan ng aming linya, na may isang tawag sa isaraPath upang matapos ang pagguhit ng landas. Panghuli, isang tawag sa stroke ay gagawing nakikita ang linya sa pamamagitan ng pagguhit ng balangkas nito. Sa pamamagitan ng pagsasama-sama na ito nakasama ka ng isang bagay tulad nito:
konteksto.beginPath (); // Start the path
konteksto.moveTo (40, 40); // Itakda ang pinagmulan ng landas
konteksto.lineTo (340, 40); // Itakda ang patutunguhan ng landas
konteksto.closePath (); // Isara ang landas
konteksto.troke (); // Balangkas ang landas
Alin ang dapat magmukhang ito, isang maganda at mainip na tuwid na linya:
Ang mga linya ay hindi dapat pahalang o patayo bagaman, sa pamamagitan ng pagbabago ng (x, y) mga argumento ng linya pamamaraan maaari mo itong gawing dayagonal:
konteksto.lineTo (340, 340);
Ang mga tuwid na linya ay hindi makapangyarihang kapana-panabik sa kanilang sarili, ngunit maaari silang pagsamahin upang makabuo ng mga kumplikadong hugis na ay nakapupukaw Dadaan ako sa mga advanced na tampok ng mga landas sa susunod na kabanata. Sa ngayon, subukan natin ang iba pa. Paano ang tungkol sa pagguhit ng mga bilog? Tiyak na medyo mas kapana-panabik sila.
08. Mga Lupon
Hindi kinakailangan ng isang henyo upang mapagtanto ang mga bilog ay ibang-iba sa mga parihaba. Gayunpaman, ang pag-alam na napupunta ito sa ilang paraan upang ipaliwanag kung bakit ang paglikha ng isang bilog sa canvas ay ibang-iba sa paglikha ng isang rektanggulo. Ang isang bilog ay isang medyo kumplikadong hugis, at dahil dito wala talagang isang espesyal na pamamaraan sa canvas upang lumikha ng isang bilog. Ano doon ay ay isang pamamaraan para sa pagguhit ng mga arko, na kung saan ay talagang isang bilog — isang arko na sumali sa magkabilang dulo. Medyo nakalilito ito, kaya paano kung tumalon kami at lumikha ng isang bilog sa canvas:
konteksto.beginPath (); // Start the path
konteksto.arc (230, 90, 50, 0, Math.PI * 2, hindi totoo); // Gumuhit ng isang bilog
konteksto.closePath (); // Isara ang landas
konteksto.fill (); // Punan ang landas
Dapat mo nang makilala ang una at huling dalawang linya, magsisimula lamang sila at isara ang landas (ang arko) at pagkatapos ay punan ito kapag tapos na tayo (punan ay ang kasamang pamamaraan upang stroke). Ang makatas na bahagi ay ang pangalawang linya, na ginagawa ang lahat na kinakailangan upang gumuhit ng isang bilog. Maaari itong magmukhang medyo kumplikado, kaya't hayaan mo akong paghiwalayin ito para sa iyo.
Mayroong anim na argumento na ginamit sa paglikha ng isang arko; ang (x, y) ay nag-uugnay ng mga halaga para sa pinagmulan ng arko (ang gitna ng bilog sa aming kaso), ang radius ng arko, ang anggulo ng pagsisimula, ang anggulo ng pagtatapos, at sa wakas ay isang halaga ng boolean na kumukuha ng arc na anti- pakaliwa kung totoo, o pakaliwa kung mali. Ang arko Ang pamamaraan ay maaaring muling maisulat sa isang mas madaling mabasa na paraan tulad nito:
context.arc (x, y, radius, startAngle, endAngle, anticlockwise);
Ang unang tatlong mga argumento ay nagpapaliwanag sa sarili kaya't lalampas ako sa mga iyon. Ang anggulo ng pagsisimula at pagtatapos ng mga argumento ng anggulo ay tila simple, ngunit nararapat na ipaliwanag nila upang maayos na maunawaan kung paano ito gumagana. Sa madaling salita, ang isang arko sa canvas ay tinukoy bilang isang hubog na landas na nagsisimula sa isang distansya mula sa (x, y) pinagmulan na katumbas ng radius, at nasa anggulo na tinukoy ng anggulo ng pagsisimula. Nagtatapos ang landas sa dulo ng anggulo isang radius ang layo mula sa (x, y) pinagmulan.
Mahalagang tandaan na ang mga anggulo sa canvas ay nasa mga radian at hindi degree at, nang hindi napupunta sa labis na detalye, ligtas na ipalagay na 360 degree (isang kumpletong bilog) ay 2π (pi na pinarami ng 2) mga radian. Ang mga taong mas matalino kaysa sa akin ay nagtrabaho kung paano mag-convert mula sa mga degree sa mga radian at nakagawa sila ng sumusunod na pormula (nakasulat sa JavaScript para sa aming mga layunin):
var degree = 1; // 1 degree
var radians = degree * (Math.PI / 180); // 0.0175 radians
Gagamitin namin ang mga radian sa buong libro, dahil nai-save ito sa amin mula sa pagganap ng hindi kinakailangang mga conversion mula sa mga degree, upang mas madali ang mga bagay na maaari mong gamitin ang imahe sa ibaba bilang isang mabilis na gabay para sa anggulo kasama ang isang bilog sa mga radian.
Para sa anumang mas kumplikado dapat mong gamitin ang pormulang inilarawan dati.
Kaya ngayon alam mo kung paano gumagana ang mga anggulo sa canvas. Ibalik natin ang pokus sa halimbawa ng bilog. Maaari mong makita ngayon na ang anggulo ng pagsisimula ay 0, ang simula ng aming arko, at ang anggulo ng pagtatapos ay Math.PI * 2 (pi pinarami ng 2); ang mga anggulong ito ay ang simula at pagtatapos ng isang bilog. Kung hindi ka naniniwala sa akin pagkatapos suriin ang imahe sa itaas.
Tandaan: Upang makakuha ng access sa halaga ng pi sa JavaScript ginagamit mo ang Matematika bagay, na kung saan ay isang espesyal na bagay na nagbibigay-daan sa iyo upang gawin ang lahat ng uri ng mga cool na bagay na batay sa matematika. Gagamitin namin ito sa hinaharap para sa mga gawain tulad ng pagbuo ng mga random na numero.
Kung patakbuhin mo ang halimbawa dapat kang makakuha ng isang display sa iyong browser tulad nito:
Isang bilog, hooray! Ngayon, ano ang magiging dulo ng anggulo kung nais mong gumuhit sa halip ng kalahating bilog? Suriin ang imahe sa itaas kung nais mo. Tama iyan, magiging simple at simple π, na ganito ang hitsura sa JavaScript:
konteksto.arc (230, 90, 50, 0, Math.PI, hindi totoo); // Gumuhit ng isang semi-bilog
Kung naging maayos ang lahat ay dapat magkaroon ng isang kaibig-ibig na semi-bilog sa iyong browser.
Bagaman ang ikaanim na pagtatalo sa arko ang pamamaraan ay sinadya upang maging opsyonal, magtatapon ng error ang Firefox kung ito ay naiwan. Dahil dito, sulit na panatilihin ito at malinaw na tumutukoy sa isang direksyon upang iguhit ang arko.
Maaari kang makalikot sa mga anggulo buong araw upang lumikha ng mga lupon ng kapat, mga hiwa ng pizza — lahat talaga ng uri. Gayunpaman, iiwan ko sa iyo kung nais mong maglaro kasama nito. Mayroon kaming mga mahahalagang bagay na makakasama, tulad ng pagbabago ng kulay ng mga bagay-bagay!
09. Estilo
Ang Itim ay kaya huling panahon. Kung may paraan lamang upang mabago ang kulay ng aming mga hugis at linya. Teka, meron? At talagang madali ito? Tulad ng isang linya ng code madali? Galing! Hindi ako nagsisinungaling tungkol sa pagiging madali nito. Tumalon tayo diretso at palitan ang kulay ng parisukat na ginawa namin sa simula ng kabanata.
context.fillStyle = "rgb (255, 0, 0)";
konteksto.fillRect (40, 40, 100, 100);
Sa pamamagitan ng pagtatakda ng fillStyle pag-aari ng konteksto ng pag-render ng 2d nagagawa mong baguhin ang kulay na pinunan ang mga hugis at landas bilang. Sa nakaraang halimbawa, isang rgb (pula, berde, at asul) na halaga ng kulay ang itinalaga, kahit na maaari mo ring gamitin ang anumang wastong halaga ng kulay ng CSS, tulad ng isang hex code (hal. # FF0000 o salitang "pula"). Sa halimbawa, ang kulay ay nakatakda sa pula (buong pula, walang berde, walang asul) at ang iyong parisukat ay dapat magmukhang ganito:
Sinabi ko sa iyo na madali ito, ngunit huwag maging masyadong nasasabik, dahil mayroong isang kabiguan. Ang isyu ay ang pagtatakda ng fillStyle pag-aari ay nangangahulugan na ang lahat ng iyong iginuhit pagkatapos itakda ito ay nasa kulay na iyon. Hindi ito isang problema kung iyon ang nais mong mangyari, ngunit mahalagang magkaroon ng kamalayan sakaling nais mo lamang baguhin ang kulay ng isang bagay. Ang isang paraan upang makaligid dito ay upang maitakda ang fillStyle ang pag-aari ay bumalik sa itim (o ibang kulay) sa sandaling iginuhit mo ang iyong mga object sa canvas, tulad nito:
context.fillStyle = "rgb (255, 0, 0)";
konteksto.fillRect (40, 40, 100, 100); // Pulang parisukat
konteksto.fillRect (180, 40, 100, 100); // Pulang parisukat
context.fillStyle = "rgb (0, 0, 0)";
konteksto.fillRect (320, 40, 100, 100); // Itim na parisukat
Alin ang magiging ganito sa browser:
Maaari mo ring gawin ang parehong bagay sa mga stroking na hugis at landas sa pamamagitan ng paggamit ng strokeStyle pag-aari Halimbawa, ang sumusunod ay kapareho ng nakaraang halimbawa maliban sa paggamit nito ng mga stroted na balangkas sa halip na punan:
context.strokeStyle = "rgb (255, 0, 0)";
konteksto.strokeRect (40, 40, 100, 100); // Pulang parisukat
konteksto.strokeRect (180, 40, 100, 100); // Pulang parisukat
context.strokeStyle = "rgb (0, 0, 0)";
konteksto.strokeRect (320, 40, 100, 100); // Itim na parisukat
Tandaan: Walang pumipigil sa iyo na pagsamahin ang pareho fillStyle at strokeStyle upang bigyan ang isang hugis ng isang pagpuno at stroke na ganap na magkakaibang mga kulay.
Walang kumplikado dito, lahat ng ito ay napaka pangunahing bagay. Napakadaling palitan din ang kulay ng mga linya:
context.strokeStyle = "rgb (255, 0, 0)";
konteksto.beginPath ();
konteksto.moveTo (40, 180);
konteksto.lineTo (420, 180); // Pulang linya
konteksto.closePath ();
konteksto.troke ();
context.strokeStyle = "rgb (0, 0, 0)";
konteksto.beginPath ();
konteksto.moveTo (40, 220);
konteksto.lineTo (420, 220); // Itim na linya
konteksto.closePath ();
konteksto.troke ();
At iyon lang talaga ang mayroon sa pagbabago ng kulay sa canvas.
10. Pagbabago ng lapad ng linya
Ang pagbabago ng kulay ay magandang kasiyahan, ngunit ang aming mga halimbawa ng linya ay medyo sa manipis na bahagi. Sa kasamaang palad sa canvas, mayroong isang paraan ng pagpapataba ng kaunti sa kanila, at iyon ang lineWidth pag-aari ng konteksto ng pag-render ng 2d. Bilang default ang lineWidth ang pag-aari ay nakatakda sa 1, ngunit maaari mo itong itakda sa anumang nais mo. Halimbawa, baguhin natin ang lapad ng aming pula at itim na mga linya:
konteksto.lineWidth = 5; // Gumawa ng makapal na mga linya
context.strokeStyle = "rgb (255, 0, 0)";
konteksto.beginPath ();
konteksto.moveTo (40, 180);
konteksto.lineTo (420, 180); // Pulang linya
konteksto.closePath ();
konteksto.troke ();
konteksto.lineWidth = 20; // Gawing mas makapal pa rin ang mga linya
context.strokeStyle = "rgb (0, 0, 0)";
konteksto.beginPath ();
konteksto.moveTo (40, 220);
konteksto.lineTo (420, 220); // Itim na linya
konteksto.closePath ();
konteksto.troke ();
Ang resulta nito ay isang bahagyang makapal na pulang linya at isang sobrang makapal na itim na linya:
At lineWidth gumagana rin sa mga hugis:
konteksto.lineWidth = 5; // Gumawa ng makapal na mga linya
context.strokeStyle = "rgb (255, 0, 0)";
konteksto.strokeRect (40, 40, 100, 100); // Pulang parisukat
konteksto.strokeRect (180, 40, 100, 100); // Pulang parisukat
konteksto.lineWidth = 20; // Gawing mas makapal pa rin ang mga linya
context.strokeStyle = "rgb (0, 0, 0)";
konteksto.strokeRect (320, 40, 100, 100); // Itim na parisukat
Alin na marahil ay nahulaan mo, gumagawa ng dalawang bahagyang makapal na pulang mga parisukat na may sobrang makapal na itim na parisukat.
Napagkadalubhasaan mo nang praktikal ang mga pangunahing kaalaman ngayon, ngunit mayroon pa ring ilang mga bagay na natitira upang masakop bago kami magpatuloy sa Talaga cool na bagay.
11. Tekstong pagguhit
Ang canvas ay hindi lamang para sa mga graphic at imahe, maaari mo rin itong gamitin upang maipakita ang teksto. Bagaman kung totoo ako, walang maraming mga okasyon kung saan ang pagguhit ng teksto gamit ang canvas ay isang mas mahusay na pagpipilian kumpara sa paglikha ng teksto gamit ang isang mas tradisyunal na diskarte sa elemento ng HTML (tulad ng may isang elemento ng p). Hayaan mo akong magpaliwanag.
Ang teksto sa canvas ay iginuhit bilang isang imahe, na nangangahulugang hindi ito mapipili ng isang mouse cursor tulad ng normal na teksto sa isang dokumento na HTML — hindi talaga ito teksto, kamukha lang nito. Kung nagamit mo na ang Microsoft Paint dati, maiintindihan mo ang ibig kong sabihin; sa sandaling iginuhit ang teksto ay hindi ito mai-e-edit maliban kung burahin mo ito at muling idididraw. Ang pakinabang sa pagguhit ng teksto sa canvas ay maaari mong gamitin ang lahat ng mga kahanga-hangang pagbabago at iba pang pag-andar na kasama ng pagguhit sa canvas. Gayunpaman, dapat kong bigyang diin na hindi ka dapat lumikha ng teksto sa canvas maliban kung mayroon kang isang lehitimong dahilan na hindi ito likhain gamit ang normal, mapipiling mga elemento ng HTML. Sa halip, dapat kang gumamit ng mga normal na elemento ng HTML upang lumikha ng teksto, at pagkatapos ay i-layer ang mga ito sa tuktok ng canvas na may pagpoposisyon ng CSS. Ang punto dito ay ang HTML na binuo upang harapin ang teksto (nilalaman), samantalang ang canvas ay binuo upang makitungo sa mga pixel at graphics.
Ngayon na ang paraan kung paano ko maipakita sa iyo kung paano gumuhit ng teksto sa canvas, napakadali:
var text = "Hello, World!";
konteksto.fillTxt (teksto, 40, 40);
Iyon lang ang kailangan mo upang gumuhit ng isang string ng teksto. Ang punan ang Teksto ang pamamaraan ng 2d na konteksto ng pag-render ay tumatagal ng apat na mga argumento (ang isa ay opsyonal, kaya naiwan na namin ito sa ngayon); ang una ay ang string ng teksto na nais mong iguhit, at ang pangalawa at pangatlo ay ang (x, y) mga halaga ng coordinate para sa pinagmulan ng teksto (sa kaliwang bahagi sa ibaba). Sinabi ko sayo madali lang yan.
Hindi ko ipapakita sa iyo ang output dahil magiging napakaliit nito upang makita, iyon ay dahil ang mga default na setting ng font para sa teksto sa canvas ay 10px sans-serif (ganap na maliit). Kaya't baguhin natin ang laki ngayon, at habang nasa ito tayo maaari ko ring ipakita sa iyo kung paano baguhin ang font. Upang gawin ito kailangan mong itakda ang font pag-aari ng konteksto ng pag-render ng 2d, tulad nito:
var text = "Hello, World!";
context. font = "30px serif"; // Baguhin ang laki at font
konteksto.fillTxt (teksto, 40, 40);
Ang font ang ari-arian ay tumatagal ng isang halaga ng string sa eksaktong parehong paraan tulad ng font pag-aari sa CSS. Sa nakaraang halimbawa, binibigyan mo ang laki ng pixel upang nais ang font, na sinusundan ng pangalan ng pamilya ng font na nais mong gamitin. Naitakda mo ito sa serif na nangangahulugang ang default na font sa computer na isang serif font (isang bagay tulad ng Times New Roman). Kapag pinagsama dapat itong magmukhang ganito:
Medyo mas mahusay iyon, maaari mo na talaga itong basahin ngayon. Maaari mo ring gawing italic ang teksto kung nais mo talaga sa pamamagitan nito:
var text = "Hello, World!";
Conteks.best = "italic 30px serif";
konteksto.fillTxt (teksto, 40, 40);
Ang nabago lang dito ay ang salitang italic ay naidagdag sa font string.
Tulad ng font napupunta ang pag-aari maraming mga setting na maaari mong gamitin, tulad ng taas ng linya, at mga fallback font na pamilya. Hindi ko sasaklawin ang mga ito, ngunit kung interesado kang gumamit ng teksto sa canvas, iminumungkahi ko na suriin mo sila.
Tandaan: Tulad ng pag-asa kong makikita mo, ang mga pangunahing kaalaman sa canvas ay napaka-nagpapaliwanag sa sarili. Ang dahilan dito ay ang 2d rendering konteksto ng API ay gumagamit ng mga pamamaraan at pag-aari na pinangalanan sa isang paraan na ginagawang madali silang maunawaan. Dapat ay magkaroon ng kahulugan ngayon kung bakit ko binigyang diin ang kahalagahan ng pagbibigay ng pangalan ng mga variable nang maayos sa Kabanata 2.
Bago tayo magpatuloy, hayaan mo akong ipakita sa iyo kung paano lumikha ng hinimok na teksto — kapaki-pakinabang itong malaman:
var text = "Hello, World!";
Conteks.best = "italic 60px serif";
konteksto.strokeText (teksto, 40, 100);
Sa oras na ito ginagamit mo na ang strokeTxt paraan, na tumatagal ng eksaktong kapareho ng mga parameter ng punan ang Teksto. Mukhang medyo kakaiba sa isang maliit na laki ng font kaya sa halimbawang ito ang laki ay mas malaki at ang pinagmulan ay inilipat nang bahagya upang ang teksto ay hindi mapunta sa tuktok ng screen. Dapat itong magmukhang kaunti ng tulad nito:
Sa pangkalahatan ay hindi ko nakikita ang labis na kaguluhan sa hinimok na teksto, ngunit maaaring mayroon kang isang kamangha-manghang proyekto na hindi magiging kumpleto nang wala ito. Kung iyon ang dahilan kung gayon iminumungkahi ko na talunin mo ang iyong sarili at mabaliw dito.
12. Binubura ang canvas
Ang pagguhit sa canvas ay talagang masaya, ngunit ano ang gagawin mo kapag nagkamali ka o nais mong punasan ang slate malinis at gumuhit ng iba pa? Sa kasamaang palad mayroong dalawang mga pagpipilian na magagamit mo: ang limasin pamamaraan, o ang lapad / taas na bilis ng kamay. Tingnan natin ang limasin paraan ng konteksto ng pag-render ng 2d muna.
Sabihin na gumuhit ka lamang ng isang parisukat at isang bilog sa canvas:
konteksto.fillRect (40, 40, 100, 100);
konteksto.beginPath ();
konteksto.arc (230, 90, 50, 0, Math.PI * 2, hindi totoo);
konteksto.closePath ();
konteksto.fill ();
At napagpasyahan mo na ngayon, sa anumang kadahilanan, na nais mong punasan ang malinis na canvas. Upang gawin ito ang kailangan mo lang gawin ay tumawag limasin na may (x, y) pinagmulan ng aming canvas, ang lapad nito, at ang taas nito. Kung ang canvas ay 500 pixel ang lapad at 500 pixel ang taas pagkatapos ang tawag sa limasin ganito ang hitsura:
konteksto.clearRect (0, 0, 500, 500);
Alin, kapag tumakbo, ay walang ipapakita sa browser, sapagkat na-wipe mo lang ang buong canvas. Maaari ka ring tumawag limasin kapag hindi mo alam ang laki ng canvas sa pamamagitan ng paggamit ng mga pamamaraang jQuery lapad at taas, tulad nito:
context.clearRect (0, 0, canvas.width (), canvas.height ());
Alin ang magiging ganito sa kabuuan nito:
var canvas = $ ("# myCanvas");
var konteksto = canvas.get (0) .getContext ("2d");
konteksto.fillRect (40, 40, 100, 100);
konteksto.beginPath ();
konteksto.arc (230, 90, 50, 0, Math.PI * 2, hindi totoo);
konteksto.closePath ();
konteksto.fill ();
context.clearRect (0, 0, canvas.width (), canvas.height ());
Isinama ko ang orihinal na variable ng canvas sa halimbawang ito upang ipaalala lamang sa iyo kung saan namin ito tinawag sa limasin pamamaraan
Tandaan: Ang elemento ng canvas ay talagang nagbibigay sa iyo ng lapad at taas mga pag-aari, kaya nasa sa iyo kung nais mong gamitin ang jQuery na paraan, o ang dalisay na paraan ng JavaScript sa pag-access sa mga sukat ng canvas.
Hindi mo kailangang limasin ang buong canvas bagaman; maaari mo ring madaling linawin ang isang partikular na lugar nito. Halimbawa, kung nais naming alisin lamang ang parisukat sa halimbawa pagkatapos ay tatawag ka limasin tulad nito:
konteksto.clearRect (40, 40, 100, 100);
Na nag-iiwan sa iyo ng isang malungkot na bilog.
Ang paraan ng paggana nito ay ang mga argumento sa limasin maaaring mabago sa gayon ang isang napaka-tukoy na lugar ay nabura. Sa aming kaso inilipat namin ang pinagmulan ng lugar na nais naming burahin (sa kaliwang tuktok) upang maging kaliwang tuktok ng parisukat (40, 40), at ang lapad at taas ng lugar na nais naming burahin ay naitakda sa lapad at taas ng parisukat (100). Ang resulta ay ang isang tukoy na lugar sa paligid ng parisukat lamang ang nakatakdang i-clear. Madali mong maaalis ang bilog sa halip sa pamamagitan ng pagbabago ng mga argumento ng limasin sa mga sumusunod:
konteksto.clearRect (180, 40, 100, 100);
Alin, kung tama ang aming mga kalkulasyon, dapat itong iwan sa amin ng isang parisukat lamang.
Tandaan na ang pinagmulan ng isang arko ay ang sentro nito, kaya upang makuha ang tamang pinagmulan para sa limasin Paraan kailangan nating kunin ang pinagmulan ng arc at ibawas ang radius nito para sa parehong x at y.
Hindi na kakailanganin mong gawin ito, ngunit walang pipigilan na burahin mo ang bahagi lamang ng isang bagay sa canvas:
konteksto.fillRect (40, 40, 100, 100);
konteksto.beginPath ();
konteksto.arc (230, 90, 50, 0, Math.PI * 2, hindi totoo);
konteksto.closePath ();
konteksto.fill ();
konteksto.clearRect (230, 90, 50, 50);
Ang halimbawang ito ay dapat kumuha ng isang malaking hiwa mula sa iyong bilog:
Ang pamamaraan na ito ay minsan ginagamit upang gumuhit ng mga kumplikadong hugis nang mabilis at madali sa pamamagitan ng pagguhit ng isang pangunahing hugis at pagpuputol ng mga piraso nito.
13. Ang lapad / taas ng bilis ng kamay
Kung nais mo lamang burahin ang lahat sa canvas at magsimulang muli mula sa simula pagkatapos ay maaari mong isaalang-alang ang lapad / taas na trick. Kung matapat ako na ito ay hindi talagang trick, ngunit isang mabisa at maliit na dokumentadong pamamaraan upang mai-reset ang isang canvas pabalik sa default, sariwang estado. Ang ideya ay na kapag ang mga katangian ng lapad at taas ng isang elemento ng canvas ay itinakda, sa anumang punto, ang canvas ay dapat na malinis pabalik sa kanyang orihinal na estado. Ang pamamaraang ito ay mayroong ilang mga sagabal, kaya't bigyan kita ng isang halimbawa:
context.fillStyle = "rgb (255, 0, 0)";
konteksto.fillRect (40, 40, 100, 100);
konteksto.beginPath ();
konteksto.arc (230, 90, 50, 0, Math.PI * 2, hindi totoo);
konteksto.closePath ();
konteksto.fill ();
Iguhit ito ng isang pulang parisukat at bilog papunta sa canvas, wala pang loko. Ngayon ay idagdag natin sa pag-reset ng canvas:
canvas.attr ("lapad", canvas.width ());
canvas.attr ("taas", canvas.height ());
Ang nangyayari dito ay isang kaunting mahika ng jQuery. Kailangan mong baguhin ang lapad at taas mga katangian ng elemento ng canvas, kaya upang gawin ito ay ginagamit mo ang attr pamamaraan sa jQuery. Ang inaasahan ko ay sa ngayon ay dapat na maging komportable ka upang hulaan kung ano ang nangyayari. Kung hindi, ipinapasa namin ang pangalan ng katangiang nais naming i-edit (lapad at taas) na sinusundan ng halagang nais naming itakda ito (ang parehong lapad at taas tulad ng dati). Kung naging maayos ang lahat dapat mong makita ang isang blangko na canvas.
Idagdag ngayon ang sumusunod na linya pagkatapos i-clear ang canvas gamit ang lapad / taas na trick:
konteksto.fillRect (40, 40, 100, 100);
Tiyak na dapat itong gumuhit ng isang pulang parisukat, tama? (Tandaan: itinakda namin ang fillStyle ari-arian dati.) Kaya't bakit sa lupa gumuhit ito ng isang itim na parisukat?
Ang downside na may lapad / taas na bilis ng kamay ay ang ganap na lahat ng bagay sa canvas ay nai-reset, kabilang ang mga estilo at kulay. Ito ang dahilan kung bakit mo lang dapat gamitin ang trick na ito kung handa kang ganap na i-reset ang canvas, hindi lamang punasan ang display na malinis.
14. Ang paggawa ng canvas punan ang browser window
Hanggang ngayon ang elemento ng canvas ay nasa isang nakapirming lapad at taas na 500 mga pixel, na kung saan ay mahusay, ngunit paano kung nais naming gawin itong punan ang buong window ng browser. Paano mo ito nagagawa? Sa pamamagitan ng isang normal na sangkap ng HTML maaari mong normal na itakda ang lapad at taas mga katangian sa 100% at lahat ka ay pinagsunod-sunod. Gayunpaman, ang elemento ng canvas ay hindi gagana sa ganitong paraan at hindi pinapansin ang porsyento, na binibigyang kahulugan ang 100% bilang 100 pixel, 200% bilang 200 pixel, at iba pa. Iba't ibang pamamaraan ang kinakailangan.
Ang pinakamadaling paraan upang gawin ito ay upang itakda ang lapad at taas ng elemento ng canvas na tiyak sa lapad ng pixel at taas ng window ng browser. Maaari kaming makakuha ng access sa lapad at taas ng window sa pamamagitan ng paggamit ng bintana object ng browser at kaunting jQuery magic:
var canvas = $ ("# myCanvas");
var konteksto = canvas.get (0) .getContext ("2d");
canvas.attr ("lapad", $ (window) .get (0) .innerWidth);
canvas.attr ("taas", $ (window) .get (0) .Inner Height);
context.fillRect (0, 0, canvas.width (), canvas.height ());
Ang dahilan na ginamit ko $ (window) .get (0) .Inner Height sa halip na $ (window) .tangkad () ay na ang huli ay tila hindi ibabalik ang buong taas sa lahat ng mga browser. Mapapansin mo na ang pamamaraang ito ay hindi talaga gumana nang maayos dahil may isang puting puwang pa rin sa paligid ng elemento ng canvas at mga scrollbar sa window ng browser:
Upang ayusin ito kailangan naming gumamit ng ilang CSS, kaya buksan ang isang bagong file sa iyong paboritong text editor at i-save ito bilang canvas.css sa parehong direktoryo ng iyong dokumento sa HTML. Ilagay ito sa loob ng CSS file at i-save ito:
* {margin: 0; padding: 0; }
html, katawan {taas: 100%; lapad: 100%; }
canvas {display: block; }
I-reset ng unang linya ang margin at padding ng bawat elemento ng HTML sa 0, inaalis ang puting hangganan na makikita mo sa screenshot sa itaas. Ito ay karaniwang kilala bilang isang pag-reset ng CSS; maraming mga mas mahusay na paraan ng paggawa nito, ngunit magsisilbi ito sa aming mga layunin sa ngayon. Ang pangalawang linya ay hindi ganap na kinakailangan, ngunit tinitiyak na ang html at katawan ang mga elemento ay ang buong lapad at taas ng window ng browser. Binabago ng pangwakas na linya ang elemento ng canvas mula sa inline hanggang sa i-block, na nagpapahintulot sa lapad ng taas na maitakda nang maayos, na pinapayagan itong kunin ang buong lapad at taas ng window ng browser nang hindi nagdudulot ng mga scrollbar.
Upang magamit ang CSS na ito sa dokumento ng HTML kailangan mong idagdag ang sumusunod na linya bago ang jQuery iskrip elemento, sa loob ng ulo elemento:
link href = "canvas.css" rel = "styleheet" type = "text / css">
Ang mga link na ito sa CSS file na iyong nilikha lamang at nagpapatakbo ng mga istilo sa loob nito. Ang resulta ay isang elemento ng canvas na perpektong pumupuno sa window ng browser.
Sa kasamaang palad hindi pa tayo tapos. Kung baguhin ang laki mo sa window ng browser ang elemento ng canvas ay mananatili sa laki dati, na nagiging sanhi ng mga scrollbars kung pinaliit mo ito:
Upang maiikot ito kailangan mong baguhin ang laki ng elemento ng canvas sa parehong sandali na ang window ng browser ay nabago ang laki. Kung nagkaroon lang ng jQuery a baguhin ang laki pamamaraan na pinaputok sa sandaling ang isang window ng browser ay nabago ang laki, katulad ng kung paano ang handa na ang pamamaraan ay pinaputok kapag handa na ang DOM. Sa kabutihang palad para sa amin, mayroon itong isang baguhin ang laki paraan, at eksaktong ginagawa nito!
$ (window). baguhin ang laki (baguhin ang sukat sa laki ng Canvas);
function resizeCanvas () {
canvas.attr ("lapad", $ (window) .get (0) .innerWidth);
canvas.attr ("taas", $ (window) .get (0) .Inner Height);
context.fillRect (0, 0, canvas.width (), canvas.height ());
};
baguhin ang lakiCanvas ();
Walang gaanong bago dito, ang karamihan sa code ay inilipat lamang nang kaunti. Ang pangunahing karagdagan ay ang jQuery baguhin ang laki na pamamaraan na itinakda upang tawagan ang baguhin ang lakiCanvas gumana kapag nabago ang laki ng window ng browser. Ang lahat ng pag-andar na mayroon ka dati upang itakda ang lapad at taas ng elemento ng canvas ay inilipat sa pagpapaandar na iyon, kasama ang pagguhit ng rektanggulo na laki ng canvas (tandaan: ang pagbabago ng lapad at taas ay ire-reset ang canvas, kaya't ang lahat ay mayroong upang ma-redrawn). Ang pangwakas na karagdagan ay isang tawag sa baguhin ang lakiCanvas pagpapaandar upang simulan ang mga bagay kapag na-load ang pahina sa unang pagkakataon.
Kung susubukan mo ito ngayon mapapansin mo ang elemento ng canvas na nagbabago nang maganda at walang lilitaw na mga scrollbar. Gumagana ito, mahusay!
15. Buod
Saklaw namin ang lahat ng uri ng mga kagiliw-giliw na bagay sa kabanatang ito, lalo na kung hindi ka pa nakakagamit ng canvas dati. Natutunan mo kung paano gamitin ang elemento ng canvas, kung paano gumuhit ng mga pangunahing hugis at landas, at kung paano baguhin ang kulay ng mga hugis at landas na iyon. Natutunan mo rin kung paano gumuhit ng teksto, burahin ang canvas, at kung paano gumawa ng canvas punan ang window ng browser. Napakalaking halaga talaga, kaya sa palagay ko dapat mong tapikin ang iyong sarili sa likuran at gumawa ka ng isa pang tasa ng tsaa upang pahintulutan ang mga bagay.
Nagustuhan ito? Basahin ang mga ito!
- Paano bumuo ng isang app
- Magagamit ang libreng graphic design software sa iyo ngayon!
- Napili ng napili ng tutorial ng Wordpress
- Lumikha ng isang perpektong board ng mood sa mga pro tip na ito
- Ang panghuli gabay sa disenyo ng logo
- Ang aming mga paboritong web font - at hindi sila nagkakahalaga ng isang sentimo
