Jump to content
Winter MEGA update e aici. Click pentru detalii. ×
Recrutăm moderatori, designeri audio şi video. Click aici
Recrutăm designeri grafici. Click aici pentru detalii
Vino și tu pe serverul nostru de rage multiplayer: v.b-zone.ro!

[HTML] Desenarea formelor de baza in canvas

AleCs STN

By AleCs STN,
in Web Development

 Share

Recommended Posts

AleCs STN Experienced

AleCs STN

Posted
Posted

   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
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept