La propiedad Canvas shadowColor se usa para establecer o devolver el color que se usa para las sombras . La propiedad fillStyle se usa para crear sombras. Esta propiedad se puede establecer en una string que representa un valor de color CSS, que queremos como color de sombra.
De forma predeterminada, el color de la sombra se establece en negro (valor de color CSS #000000).
Sintaxis: :
context.shadowColor = color;
Parámetros: :
color : Este parámetro indica un valor de color css que se utilizará como color de sombra del dibujo.
La propiedad shadowColor junto con la propiedad shadowBlur para crear una sombra. Además, el ajuste de la sombra se puede realizar utilizando las propiedades shadowOffsetX y shadowOffsetY .
context.shadowOffsetX : Esto indica el desplazamiento x de la sombra. Puede ser positivo o negativo.
context.shadowOffsetY : Esto indica el desplazamiento y de la sombra. Puede ser positivo o negativo.
context.shadowBlur : Esto indica la difusión del filtro de desenfoque de la sombra. Cuanto mayor sea el número, más difusión.
Ejemplo 1:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas"
width="578"
height="400">
</canvas>
<script>
var canvas =
document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = "35px Helvetica";
context.shadowOffsetX = 3;
context.shadowOffsetY = 3;
context.fillText("GeeksforGeeks", 190, 100);
context.shadowColor = "rgba(0, 0, 0, 0.5)";
context.fillText("GeeksforGeeks", 190, 160);
context.shadowBlur = 1;
context.fillText("GeeksforGeeks", 190, 220);
</script>
</body>
</html>
Producción:
Ejemplo-2:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="300"
height="150">
</canvas>
<script>
var c =
document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.shadowBlur = 20;
ctx.fillStyle = "green";
ctx.shadowColor = "yellow";
ctx.fillRect(20, 20, 100, 80);
ctx.shadowColor = "blue";
ctx.fillRect(140, 20, 100, 80);
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- Mozilla Firefox
- Borde 9.0
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por IshwarGupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA