HTML reference manual

HTML tag大全

HTML: <template> etichetta

HTML canvas shadowOffsetY attribute

The shadowOffsetY attribute is used by the Canvas 2D API to describe the vertical offset distance of the shadow.

Manuale di riferimento HTML canvas

Online Example

Draw a rectangle with a shadow 20 pixels below the top of the rectangle:

Usage of shadowOffsetY attribute:

Example

<!DOCTYPE html>
<html>
<head>
<title>Using HTML canvas shadowOffsetY attribute (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</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>

test and see ‹/›

browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano l'attributo shadowOffsetY.

Attenzione:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

L'attributo shadowOffsetY imposta o restituisce la distanza verticale tra l'ombra e la forma.
shadowOffsety = 0 indica che l'ombra è esattamente dietro la forma.
shadowOffsetY = 20 indica che l'ombra inizia 20 pixel sotto la posizione superiore della forma.
shadowOffsetY =-20 indica che l'ombra inizia 20 pixel sopra la posizione superiore della forma.

Suggerimento:Per regolare la distanza orizzontale tra l'ombra e la forma, utilizzare shadowOffsetX Attributo.

Valore predefinito:	0
Sintassi JavaScript:	context.shadowOffsetY=number;

Valore dell'attributo

Valore	Descrizione
number	Valore positivo o negativo, definisce la distanza verticale tra l'ombra e la forma.

Manuale di riferimento HTML canvas

HTML: <template> etichetta