Part 1: Notaðu < striga > tag miða rétthyrnd hluta tölvuskjá fyrir nýja striga glugga. Þú getur tilgreint hæð og breidd striga, mælt frá efri-vinstri horni. Deili eiginleiki (id) fyrir striga er mikilvægt vegna þess að þú þarft það til að passa samsvarandi JavaScript kóða þess. Eftirfarandi er dæmi um notkun striga tag í HTML5 kóða:
< striga id = " sampleCanvas "
width = " 400 "
height = " 300 >
Ef þú sérð þennan texta, vafrinn þinn
hefur ekki HTML5 striga stuðning
< /striga >
Part 2.: Búa JavaScript sem dregur efni í striga. Síðar munum við finna út hvernig á að bæta við og stjórna JavaScript kóða í tengslum við HTML5 vefsíðu. Hér skulum líta bara á einhverjum sýni JavaScript þú getur notað til að striga hlutum. Eftirfarandi númer teiknar rétthyrning í striga ofan:
virka drawRectangle () {
Var targetCanvas = document.getElementById (" sampleCanvas ");
Var rectContext = sampleCanvas.getContext (" 2d ");
rectContext.fillStyle = " blár ";
rectContext.fillRect (50, 25, 150, 100);
}
Þetta fall teiknar solid blár rétthyrningur innan striga. Tveir " Var " línur skapa breytur sem þú getur notað. Fyrsta (targetCanvas) er bent á striga frumefni sem þú miðar nota kenni frá HTML. Annað (rectContext) setur upp tvívíð samhengi til að teikna. Hugsaðu um samhengi sem glær lag af gleri mælt ofan á striga, og þú munt kalla aðgerðir til að draga á þeim gler
". FillStyle " lína er bent lit blár með nafni, sem HTML viðurkennir og tengist einni af nefndum liti. Þú getur líka notað hvaða lit, mynstur eða halla eins og þú vildi þegar þú skrifar stíl kóða í HTML eða CSS. &Quot; fillRect " lína dregur rétthyrningur byrjar á móti frá efri vinstri, fyrstu tvær tölur vera x og y hefur vegið eins táknið efst til vinstri á striga var hnit (0,0). Annað tveir tölustafir tákna breidd og hæð rétthyrningsins sig
Part 3:. Hringdu JavaScript fall af HTML kóðanum. Þessi tengsl tvö stykki saman. Þú gætir kalla aðgerðina um leið og síðan opnast, sem vit ef þú ert að nota striga til að draga gagnvirka síðu innihald sem þarf til að birtast eins fljótt og síðan opnast. Annar möguleiki er að búa til hnapp, matseðil eða aðra í HTML sem kallar teikniborði
