Joonistamise jaoks tuleb esmalt luua koht, kuhu joonistada. HTML-is on selleks olemas element nimega <canvas>.
Element tuleb paigutada HTML lehe <body> elementide vahele ning selleks, et Javascript teda kasutada saaks, tuleb talle anda ka nimi (id), antud juhul on nimeks tahvel.
<!DOCTYPE html>
<html>
<head>
<title>Joonistamine</title>
</head>
<body>
<h1>Joonistamine</h1>
<canvas id="tahvel" width="300" height="200" style="background-color:#FFF8DC"></canvas>
<br>
</body>
</html>
Avage Notepad ning kopeerige sinna ülalolev kood. Salvesta fail ning anna talle nimeks joonistamine.html
Ava fail veebilehitsejaga (soovitavalt Firefox) ning sul peaks ekraanile tekkima kollakas kast.
Värvikoodi (#FFF8DC) võid endale meeldivamaks muuta, näiteid vaata siit: värvikoodid
Lisame koodi nüüd Javascript-funktsiooni, mis joonistaks värvilisse kastikesse ristküliku.
Selleks tuleb HTLM lehe päisesse <head> ... </head> vahele kirjutada
<script type="text/javascript">
</script>
Skripti tagide vahele lisame funktsiooni "joonista"
function joonista(){
var g=document.getElementById("tahvel").getContext("2d");
g.fillRect(20, 20, 50, 50);
}
Selleks, et lehekülje avanedes kohe ka kastike joonistataks, tuleb HTML koodi <body> osasse lisada
<body onload="joonista()">
Salvesta oma lehekülg ja katseta!
Proovi muuta javaskriptis g.fillRect(20, 20, 50, 50) numbreid. Salvesta ja ava fail veebilehitsejas. Mida märkad?
Esimesed numbrid määravad ära ruudukese kauguse "tahvli" ülemisest vasakust nurgast (mõlemast 20). Järgmised numbrid näitavad kastikese laiust ja kõrgust.
Täiendame oma skripti sellega, et kasutaja saab ise vastavad väärtused lehele lisada ning joonistatakse just selline ruut või ristkülik, nagu kasutaja soovib.
Selleks lisame esmalt HTML koodi <canvas> elemendi alla teksti:
Sisesta laius x kõrgus<br>
<input type="text" id="laius" value=" " /> x
<input type="text" id="korgus" value=" " />
<input type="button" value="Joonista" onclick="joonista()" />
body onload="joonista()" kustutame nüüd ära, sest edaspidi hakkab joonistamisfunktsiooni käivitama nupp "joonista".
Salvesta ning testi nupu töötamist!
Nupuvajutuse peale joonistatakse olenemata sisestatud arvudest kujund, mis on määratud HTML lehe päises olevas skriptis!
Selleks, et joonistamisel aluseks võtta kasutaja sisestatud arvud, tuleb skripti veidi muuta.
Esmalt tuleb defineerida muutujad laius ja korgus ehk siis need väärtused, mis sisestab kasutaja
var laius=parseInt(document.getElementById("laius").value);
var korgus=parseInt(document.getElementById("korgus").value);
parseInt käsklus teisendab tekstikasti sisestatud numbrid javascripti jaoks arvudeks.
Edasi tuleb anda käsklus ristküliku/ ruudu joonistamiseks
g.fillRect(20, 20, laius, korgus);
Funktsioon "joonista" peaks nüüd välja nägema selline:
function joonista(){
var g=document.getElementById("tahvel").getContext("2d");
var laius=parseInt(document.getElementById("laius").value);
var korgus=parseInt(document.getElementById("korgus").value);
g.fillRect(20, 20, laius, korgus);
};
Salvesta oma fail ja katseta!
Ilmselt märkasid, et uute arvude sisestamisel joonistatakse kujund nö vana kujundi peale (suuremaid saab joonistada, aga väiksemaid ei ole näha). Selleks, et enne joonistamist plats puhtaks tehtaks, tuleb lisada joonista funktsiooni sisse ka vastav käsklus
g.clearRect(0, 0, 300, 200);
Puhastamist alustatakse "tahvli" vasakust ülanurgast (0, 0) ning mõõtudeks on "tahvli" mõõtmed (need on kirjeldatud <canvas> elemendi sees).
Kui soovid, et joonistatav ruut oleks mõnda muud värvi, kui must, siis lisa joonistamise funktsiooni veel järgmine rida:
g.fillStyle = "red";
Valmis lehekülg võiks välja näha ja toimida selliselt: http://www.hot.ee/vroosioks/joonistamine.html
