E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale HTML

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  HTML  /  HTML5 (5)

Desenarea formelor de baza in canvas

23.07.2012
Desenarea formelor de baza in canvas

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.

Total vizualizari: 7570 7570 afisari   |   Comentarii  0   |   Rating   |   (3 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Mediu  Mediu

Autor: Pustiu Expert
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

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>

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>

De retinut

Asa cum am prezentat in tutorialul Desenarea curbelor in canvas, folosirea metodei arc() presupune desenarea unei sectiuni de cerc specificand unghiul de pornire si unghiul de oprire. Daca diferenta dintre acestea o definim ca fiind 360°, rezultatul este un cerc complet.

Pagina:
1
comenteaza printeaza

Cuvinte cheie:   Tutorial limba romana,   HTML5,   canvas,   fillStyle,   fillStroke,   strokeRect,   fillRect

Alte tutoriale HTML:
Noteaza acest tutorial
Rating tutorial
 
(3 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4165
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4075
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4050
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
3865
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Bridge RoR CSS Illustrator Flash HTML MySQL Excel PHP XML Javascript StyleSheet AJAX Photoshop SEO COREL DRAW Gimp XHTML Word Vista SWF Python Dreamweaver Fireworks Ruby on Rails JSON Verilog Java Outlook Swift 3D Powerpoint PSD Lightroom Action Script Sony Vegas Fotografie
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software