HTML canvas shadowOffsetXAttributs

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

Exemples

Dessinez un rectangle avec une ombre décalée de 20 pixels vers la droite (à partir de la position gauche 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.shadowOffsetX=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é shadowOffsetX.

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é shadowOffsetX définit ou renvoie la distance horizontale de l'ombre par rapport à la forme.

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

shadowOffsetX=20 indique que l'ombre se trouve à 20 pixels à droite de la position gauche de la forme.

shadowOffsetX=-20 indique que l'ombre se trouve à 20 pixels à gauche de la position gauche de la forme.

Astuce :Pour ajuster la distance verticale de l'ombre par rapport à la forme, utilisez la propriétéshadowOffsetY.

Valeur par défaut : 0
Syntaxe JavaScript : context.shadowOffsetX=number;

Valeurs de propriété

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

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