Manual de referencia de HTML

Completo de etiquetas HTML

HTML: <template> etiqueta

Atributo shadowOffsetY en HTML canvas

shadowOffsetY es una propiedad de Canvas 2D API describe la propiedad de distancia vertical de la sombra.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibujar una sombra en la parte inferior del rectángulo superior20 píxeles de un rectángulo:

Uso del atributo shadowOffsetY:

Ejemplo

!DOCTYPE　html>
<html>
<head>
<title>Uso del atributo shadowOffsetY en HTML canvas (Tutoriales básicos de la web oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite　HTML5　canvas　etiqueta.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
</script>
</body>
</html>

Prueba aquí ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome y Safari admiten la propiedad shadowOffsetY.

Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.

Definición y uso

La propiedad shadowOffsetY establece o devuelve la distancia vertical entre la sombra y la forma.
shadowOffsety = 0 indica que la sombra está exactamente detrás de la forma.
shadowOffsetY = 20 indica que la sombra comienza下方 de la posición superior de la forma20 píxeles.
shadowOffsetY =-20 indica que la sombra comienza上方 de la posición superior de la forma20 píxeles.

Consejo:Para ajustar la distancia horizontal entre la sombra y la forma, utilice shadowOffsetX Atributo.

Valor predeterminado:	0
Sintaxis de JavaScript:	contexto.shadowOffsetY=número;

Valor del atributo

Valor	Descripción
número	Valor positivo o negativo, define la distancia vertical entre la sombra y la forma.

Manual de referencia de canvas HTML

HTML: <template> etiqueta