Imagini de fundal
În locul unei culori specifice pentru umplerea formelor, de exemplu, dreptunghiuri, putem folosi imagini. Pentru acest lucru, contextul elementului canvas dispune de funcția createPattern(), care acceptă doi parametri: imaginea care va fi folosită ca fundal și principiul de repetare a imaginii. Ultimul parametru joacă un rol în cazul în care dimensiunea imaginii este mai mică decât dimensiunea formei pe canvas. Acest parametru poate lua următoarele valori:
- repeat: imaginea se repetă pentru a umple întregul spațiu al formei
- repeat-x: imaginea se repetă doar orizontal
- repeat-y: imaginea se repetă doar vertical
- no-repeat: imaginea nu se repetă
Vom desena un dreptunghi și vom afișa în el o imagine:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<canvas id="canvas" width="400" height="250"></canvas>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const img = new Image();
img.src = "forest.png";
img.onload = function() {
const pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillRect(10, 10, 200, 200);
context.strokeRect(10, 10, 200, 200);
};
</script>
</body>
</html>Pentru a folosi o imagine, trebuie să creăm un element Image și să setăm sursa imaginii - un fișier local sau o resursă de pe internet:
const img = new Image();
img.src = "fox.png";În acest caz, se presupune că în același director cu fișierul html se află fișierul imagine fox.png. Totuși, încărcarea imaginii poate dura un timp, mai ales dacă fișierul imaginii este luat de pe internet. Prin urmare, pentru a fi siguri că imaginea a fost încărcată, toate acțiunile de utilizare a acesteia se efectuează în metoda img.onload, care este apelată la finalizarea încărcării imaginii:
img.onload = function() {
const pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillRect(10, 10, 200, 200);
context.strokeRect(10, 10, 200, 200);
};Metoda createPattern() returnează un obiect care este setat ca stil de umplere a formei: context.fillStyle = pattern;. Desenarea dreptunghiului rămâne aceeași.
