Desenarea formelor de bază în canvas
Efect dramatic în Photoshop
July 16, 2012
Desenarea unui logo în CSS
August 26, 2012 |
Tutorial publicat și pe E-learn.ro |
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.
