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: 10358 10358 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
5460
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5460
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
5285
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
5270
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
5015
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Photoshop Illustrator Sony Vegas Vista AJAX SEO Swift 3D Lightroom Powerpoint Gimp Word RoR XHTML PSD Bridge Excel XML MySQL StyleSheet Ruby on Rails SWF Action Script COREL DRAW HTML Javascript JSON Dreamweaver Flash Verilog Fireworks Outlook PHP Python Java CSS 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