Jump to content

NEW - Rapoarte de activitate obligatorii și Waruri de Vară. Detalii aici
Modificări în facțiuni și reguli. Detalii aici

Sign in to follow this  
uS AleCs

[HTML] Desenarea formelor de baza in canvas

Recommended Posts

   In acest tutorial vom invata sa desenam forme de baza: un dreptunghi si un cerc, care desi par banale, sunt foarte folosite si stau la baza unor desene mai complicate. Dreptunghiul este singura forma suportata ca atare de canvasul HTML5 iar cercul il vom realiza dintr-un arc complet inchis.

Pentru ca deja am trecut prin cateva tutoriale cu detaliile canvas-ului, voi fi mai succint in acesta, exemplificand doar pasii necesari.

Desenarea dreptunghiului

 

1. Definim contextul canvas-ului:

window.onload = function(){ 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d");

 

2. Desenam dreptunghiul folosind metoda rect(), setam culoarea de umplere cu proprietatea fillStyle si umplem forma cu metoda fill():?

context.rect(canvas.width / 2 - 100, canvas.height / 2 - 50, 200, 100); 
context.fillStyle = "#ffaa00"; 
context.fill(); 
context.lineWidth = 5; 
context.strokeStyle = "000000"; 
context.stroke(); 
};

 

3. Introducem canvas-ul in tag-ul body al documentului nostru HTML.

<body> 
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000"> </canvas> 
</body>

 

9.jpg

De retinut

Putem desena un dreptunghi in canvas folosind metoda rect():

context.rect(x,y,width,height);

pornind din coordinatele x,y (prima pereche de valori) si setandu-i dimensiunile prin width si height (cea de-a doua pereche de valori).

De asemenea, de remarcat este ca am folosit fill() inaintea stroke(). Daca am fi procedat invers, jumatate din grosimea liniei de contur ar fi fost acoperita de culoarea de umplere. Asadar, este o buna practica sa folosim fill() inainte de stroke().

Ca metode aditionale de desenat un dreptunghi in canvas, exista fillRect() si strokeRect().

fillRect() este o metoda echivalenta folosirii metodei rect(), urmata de fill().

context.fillRect(x,y,width,height);

strokeRect() este o metoda echivalenta folosirii metodei rect(), urmata de stroke().

context.strokeRect(x,y,width,height);

Desenarea cercului

1. Definim contextul canvas-ului:

window.onload = function(){ 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d");

 

2. Desenam un cerc folosind metoda arc(), setam culoarea de umplere cu proprietatea fillStyle si umplem forma cu metoda fill():

context.arc(canvas.width / 2, canvas.height / 2, 70, 0, 2 * Math.PI, false); context.fillStyle = "#ffaa00"; 
context.fill(); 
context.lineWidth = 5; 
context.strokeStyle = "000000"; 
context.stroke(); };

 

3. Introducem canvas-ul in tag-ul body al documentului nostru HTML.

<body> 
    <canvas id="myCanvas" width="500" height="300" style="border:1px solid #000000"> </canvas> 
</body>

 

10.jpg

Share this post


Link to post
Share on other sites

folositor, dar mai greu de invatat, nu e asa usor

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

×