Crtanje pravougaonika

Evo jednog jednostavnog primera koji crta dva kvadrata koji se preklapaju:

<html><head> <script type="application/javascript"> function crtaj() { canvas = document.getElementById("kocke"); if (canvas.getContext) { ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } </script> </head><body onload="crtaj();"> <canvas id="kocke" width="150" height="150"></canvas> </body></html>

Ovde smo crtali dva popunjena i obojena pravougaonika. Postoje tri funkcije koje crtaju pravougaonik:

fillRect(x, y, dužina, visina) - crta ispunjen pravougaonik
strokeRect(x, y, dužina, visina) - crta samo konture pravougaonika
clearRect(x, y, dužina, visina) - briše sve nacrtano unutar kontura ovako definisanog pravougaonika

X i Y su koordinate gornjeg levog temena pravougaonika, a dužina je dužina pravougaonika a visina je visina.

Pre nego krenemo dalje da damo prikaz kako se definiše canvas i kako je postavljen koordinatni sistem, i kako izgleda definicija pravougaonika unutar canvas-a:

Evo primera sa sve tri funkcije gornje:

<html><head> <script type="application/javascript"> function crtaj() { canvas = document.getElementById("kocke"); if (canvas.getContext) { ctx = canvas.getContext("2d"); ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); } } </script> </head><body onload="crtaj();"> <canvas id="kocke" width="150" height="150"></canvas> </body></html>

Medjutim kada crtanje pravuganika kombinujemo sa drugim geometrijskim figurama kako bi nacrtali složene crteže koristiti se funkcija:

rect(x, y, width, height)

Ali rect( ) se koristi samo u kombinaciji sa funkcijama stroke() i fill() koje će mo objasniti odma u sledećem naslovu: