HTML Canvas Tutoriaal
Die HTML <canvas> element word gebruik om grafika op 'n webblad te teken.
Die grafika hierbo is geskep met <canvas>.
Dit wys vier elemente: 'n rooi reghoek, 'n gradiëntreghoek, 'n veelkleurige reghoek en 'n veelkleurige teks.
Wat is HTML Canvas?
Die HTML <canvas> element word gebruik om grafika te teken, op die vlieg, via scripting (gewoonlik JavaScript).
Die <canvas>-element is slegs 'n houer vir grafika. Jy moet 'n skrif gebruik om die grafika werklik te teken.
Canvas het verskeie metodes om paaie, bokse, sirkels, teks te teken en beelde by te voeg.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die <canvas>-element ten volle ondersteun.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML-doek kan teks teken
Canvas kan kleurvolle teks teken, met of sonder animasie.
HTML-doek kan grafika teken
Canvas het wonderlike kenmerke vir grafiese data-aanbieding met 'n beeldmateriaal van grafieke en kaarte.
HTML-doek kan geanimeer word
Seilvoorwerpe kan beweeg. Alles is moontlik: van eenvoudige bonsballe tot komplekse animasies.
HTML-doek kan interaktief wees
Canvas kan reageer op JavaScript-gebeurtenisse.
Canvas kan reageer op enige gebruikeraksie (sleutelklikke, muisklikke, knoppiesklikke, vingerbeweging).
HTML-doek kan in speletjies gebruik word
Canvas se metodes vir animasies bied baie moontlikhede vir HTML-speletjietoepassings.
Seil voorbeeld
In HTML lyk 'n <canvas> element soos volg:
<canvas id="myCanvas" width="200" height="100"></canvas>
Die <canvas>-element moet 'n id-kenmerk hê sodat dit deur JavaScript verwys kan word.
Die breedte en hoogte kenmerk is nodig om die grootte van die doek te definieer.
Wenk: Jy kan veelvuldige <canvas>-elemente op een HTML-bladsy hê.
By verstek het die <canvas>-element geen rand en geen inhoud nie.
Om 'n rand by te voeg, gebruik 'n stylkenmerk:
Voorbeeld
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;"></canvas>
Die volgende hoofstukke wys hoe om op die doek te teken.