HTML canvas shadowOffsetYAttribut

HTML canvas 参考手册Manuel de référence HTML canvas

Exemples

Dessinez un rectangle avec une ombre décalée de 20 pixels vers le bas (à partir de la position supérieure du rectangle) :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

JavaScript :

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);

Essayez-le vous-même »

Prise en charge des navigateurs

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la propriété shadowOffsetY.

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La propriété shadowOffsetY définit ou renvoie la distance verticale de l'ombre par rapport à la forme.

shadowOffsety=0 indique que l'ombre se trouve directement sous la forme.

shadowOffsetY=20 indique que l'ombre est située 20 pixels sous la position supérieure de la forme.

shadowOffsetY=-20 indique que l'ombre est située 20 pixels au-dessus de la position supérieure de la forme.

Astuce :Pour ajuster la distance horizontale de l'ombre par rapport à la forme, utilisez lashadowOffsetXpropriété.

Valeur par défaut : 0
Syntaxe JavaScript : context.shadowOffsetY=nombre;

Valeurs de propriété

Valeur Description
nombre Valeur positive ou négative qui définit la distance verticale de l'ombre par rapport à la forme.

HTML canvas 参考手册Manuel de référence HTML canvas Autres extensions