Claudia Chiriță . 2023/2024
const canvas = document.getElementById("tutorial");
const ctx = canvas.getContext("2d");
fillRect(x, y, width, height)
// desenează un dreptunghi plin
strokeRect(x, y, width, height)
// desenează un contur de dreptunghi
clearRect(x, y, width, height)
// șterge zona dreptunghiulară, făcând-o transparentă
arc(x, y, radius, startAngle, endAngle, counterclockwise)
/* arc centrat în (x, y) cu raza r
începând de la startAngle și până la endAngle,
în direcția dată de counterclockwise */
arcTo(x1, y1, x2, y2, radius)
/* arc cu punctele de control și raza date,
conectat la punctul anterior printr-o linie dreaptă */
quadraticCurveTo(cp1x, cp1y, x, y)
/* curbă Bézier cuadratică de la poziția curentă
la punctul specificat de x și y,
folosind punctul de control (cp1x, cp1y) */
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
/* curbă Bézier cubică de la poziția curentă
la punctul specificat de x și y,
folosind punctele de control
(cp1x, cp1y) și (cp2x, cp2y) */
Path2D.addPath(path [, transform])
/* adaugă un path la path-ul curent
cu o matrice de transformare opțională */
fillStyle = color;
strokeStyle = color;
globalAlpha = transparencyValue; // valori în [0, 1]
lineWidth = value;
lineCap = type; // butt, round, square
lineJoin = type; // round, bevel, miter
getLineDash(); // patternul de linie dash curent
setLineDash(segments); // setează patternul de linie dash
lineDashOffset = value; // unde să încheapă patternul dash
createLinearGradient(x1, y1, x2, y2)
// gradient liniar de la (x1,y1) la (x2,y2)
createRadialGradient(x1, y1, r1, x2, y2, r2)
/* gradient radial: un cerc cu centrul în (x1,y1) și raza r1
și unul cu centrul în (x2, y2) și raza r2 */
createConicGradient(angle, x, y)
/* gradient conic cu unghi de angle radiani
la poziția (x, y) */
createPattern(image, type)
/* image: sursa unei imagini
type: repeat, repeat-x, repeat-y, no-repeat */
shadowOffsetX = float;
// distanța orizontală de la obiect
shadowOffsetY = float;
// distanța verticală de la obiect
shadowBlur = float;
shadowColor = color;
fillText(text, x, y [, maxWidth]);
strokeText(text, x, y [, maxWidth]);
font = value; // default: 10px sans-serif
textAlign = value; // start, end, left, right, center
textBaseline = value; /* top, hanging, middle,
alphabetic, ideographic, bottom */
direction = value; // ltr, rtl, inherit
const img = new Image(); // crează element img nou
img.addEventListener("load", () => {
// execute drawImage statements here
}, false);
img.src = "myImage.png"; // source path
drawImage(image, x, y);
// desenează o imagine la poziția (x,y)
drawImage(image, x, y, width, height);
// + scalare
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
/* ia din imaginea sursă un dreptunghi cu colțul din stânga
sus la (sx, sy) și cu lățimea sWidth și înălțimea sHeight
și o desenează în canvas la poziția (dx, dy), scalând-o */
save(); // salvează starea canvasului
restore(); // restaurează cel mai recent salvată stare
o stare de desen a canvasului constă din
translate(x, y);
// mișcă canvasul și originea pe grid cu distanțele x și y
rotate(angle); // rotirea canvasului în jurul originii
scale(x, y); /* scalarea canvasului cu x și y unități;
valori nr. reale */
transform(a, b, c, d, e, f);
/* înmulțeste matricea de transformare curentă cu
matricea dată prin argumente */
globalCompositeOperation = type;
// tipul de compunere la desenarea unor figuri noi
clipping path: mascarea unei zone din canvas
clip(); // path-ul construit devine clipping path-ul curent
pași pentru desenarea unui frame:
update-uri programate:
setInterval();
setTimeout();
requestAnimationFrame(callback);
/* cere browserului să apeleze funcția callback pentru a
actualiza o animație înainte de următoarea redesenare */
![svg image](image.svg)
<iframe src="image.svg"></iframe>
WW
/__\
| oo | _WWWWW_
(o)(o) (|_()_|) / o o \ întrebări?
w" "w \__/ (| __O__ |)
W -====- W /|\/|\ \ \___/ /
"w w" |||||||| /-------
w"""""""""w |||||||||=========|
W W|||||||||=========|