Adăugarea umbrelor
Elementul canvas suportă adăugarea de umbre la obiectele desenate. Pentru crearea umbrelor, se utilizează următoarele proprietăți ale contextului canvas:
- shadowOffsetX: deplasarea orizontală în pixeli spre dreapta (sau spre stânga pentru valori negative)
- shadowOffsetY: deplasarea verticală în pixeli în jos (sau în sus pentru valori negative)
- shadowBlur: numărul de pixeli pentru setarea estomparea umbrei
- shadowColor: culoarea umbrei
De exemplu, să setăm o umbră pentru un dreptunghi:
<!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");
context.fillStyle = "#3498db";
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 10;
context.shadowColor = "#999";
context.fillRect(10, 10, 200, 200);
</script>
</body>
</html>În acest caz, setăm o umbră pentru dreptunghi.
În mod similar, se pot aplica umbre și altor forme, textului și imaginilor:
<!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");
context.font="16px Verdana";
context.fillStyle = "#222";
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.shadowBlur = 3;
context.shadowColor = "#AAA";
context.fillText("Umbre pe Canvas", 80, 30);
const img = new Image();
img.src = "fox2.png";
img.onload = function() {
context.shadowOffsetX = 8;
context.shadowOffsetY = 8;
context.shadowBlur = 5;
context.shadowColor = "#333";
context.drawImage(img, 50, 50, 192, 128);
};
</script>
</body>
</html>