Grafică Canvas HTML
Elementul <canvas> este folosit pentru a desena grafică pe o pagină web, precum dreptunghiuri, gradienți și text.
Ce Este HTML Canvas?
Elementul <canvas> este folosit pentru a desena grafică din mers cu JavaScript. Elementul în sine este doar un container; trebuie să folosiți JavaScript pentru a face desenul propriu-zis. Canvas are metode pentru desenarea traseelor, casetelor, cercurilor, textului și imaginilor, și este suportat de toate browserele majore.
Exemple Canvas
Un canvas este o zonă dreptunghiulară pe pagină. Implicit nu are chenar și niciun conținut.
Notă: Dați-i întotdeauna un id (pentru a-l referi într-un script) și atributele width și height pentru a-i seta dimensiunea. Pentru a adăuga un chenar, folosiți atributul style.
Exemplu
Un canvas de bază, gol, cu chenar.
Prompt
O pagină cu un canvas de bază, gol, de 200x100 (id myCanvas) căruia i se aplică un chenar negru solid de 1px prin atributul style.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas Gol</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
</body>
</html>
Marcaj canvas
Marcajul de bază pentru un element canvas.
index.html
<canvas id="myCanvas" width="200" height="100"></canvas>
Adăugarea unui JavaScript
După crearea zonei canvas, adăugați JavaScript pentru a face desenul. Obțineți canvas-ul cu getElementById, apoi apelați getContext("2d") pentru a obține contextul de desenare și folosiți metodele sale. Iată câteva exemple.
Desenarea unei Linii
Desenarea unei linii cu moveTo, lineTo și stroke.
Prompt
O pagină cu un canvas 200x100 și un script care desenează o linie de la (0,0) la (200,100) folosind getContext('2d'), moveTo, lineTo și stroke.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desenare Linie</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browserul tău nu suportă tag-ul HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
</body>
</html>
Desenarea unui Cerc
Desenarea unui cerc cu arc și stroke.
Prompt
O pagină cu un canvas de 200x100 și un script care desenează un cerc centrat la (95,50) cu raza 40 folosind arc și stroke.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desenare Cerc</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browserul tău nu suportă tag-ul HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
Desenarea unui Text
Desenarea de text umplut cu fillText.
Prompt
O pagină cu un canvas 200x100 și un script care desenează text umplut "Salut Lume" cu font 30px Arial la (10,50) folosind fillText.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desenare Text</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browserul tău nu suportă tag-ul HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Salut Lume", 10, 50);
</script>
</body>
</html>
Text cu Contur
Desenarea de text conturat cu strokeText.
Prompt
O pagină cu un canvas 200x100 și un script care desenează text conturat "Salut Lume" cu font 30px Arial la (10,50) folosind strokeText.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Conturat</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browserul tău nu suportă tag-ul HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Salut Lume", 10, 50);
</script>
</body>
</html>
Desenarea unui Gradient Liniar
Umplerea unui dreptunghi cu un gradient liniar.
Prompt
O pagină cu un canvas 200x100 și un script care umple un dreptunghi cu un gradient liniar orizontal de la roșu la alb.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Liniar</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browserul tău nu suportă tag-ul HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Creează gradientul
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Umple cu gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
Desenarea unui Gradient Circular
Umplerea unui dreptunghi cu un gradient radial.
Prompt
O pagină cu un canvas de 200x100 și un script care umple un dreptunghi cu un gradient radial (circular) de la roșu la alb.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Circular</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browserul tău nu suportă tag-ul HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Creează gradientul
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Umple cu gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>
</body>
</html>
Desenarea unei Imagini
Desenarea unei imagini existente pe canvas cu drawImage.
Prompt
O pagină cu o imagine ascunsă (id scream) și un canvas 200x100, plus un script care desenează imaginea pe canvas la poziția (10,10) folosind drawImage.
Ieșire: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desenare Imagine</title>
</head>
<body>
<p>Imaginea de folosit:</p>
<img id="scream" src="img_the_scream.jpg" alt="Țipătul" style="display:none;">
<p>Canvas:</p>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Browserul tău nu suportă tag-ul HTML canvas.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>
</body>
</html>