Manuel de référence HTML

Toute la liste des balises HTML

HTML: <template> balise

Attribut shadowOffsetX du canvas HTML

shadowOffsetX est un attribut de Canvas 2L'API D décrit l'attribut de décalage horizontal de l'ombre.

Guide de référence HTML canvas

Exemple en ligne

Tracez une ombre à droite2Un rectangle de 0 pixels (à partir de la position de gauche du rectangle bleu) :

Demonstration de l'utilisation de l'attribut shadowOffsetX du canvas HTML :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>Utilisation de l'attribut shadowOffsetX du canvas HTML (Tutoriel de base du site web oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
ctx.fillRect(20,20,100,80);
</script>
</body>
</html>

Voyons ça ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome et Safari prennent en charge l'attribut shadowOffsetX.

Attention :Internet Explorer 8 Les versions précédentes de <canvas> ne prennent pas en charge l'élément.

Définition et utilisation

L'attribut shadowOffsetX définit ou retourne la distance horizontale entre l'ombre et la forme.
shadowOffsetX = 0 signifie que l'ombre est exactement derrière la forme.
shadowOffsetX = 20 signifie que l'ombre commence à partir de la position de gauche de la forme et se déplace vers la droite20 pixels.
shadowOffsetX = -20 signifie que l'ombre commence à partir de la position de gauche de la forme et se déplace vers la gauche20 pixels.

Astuce :Pour ajuster la distance verticale entre l'ombre et la forme, utilisez shadowOffsetY Attribut.

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

Valeur de l'attribut

Valeur	Description
number	Valeur positive ou négative, définissant la distance horizontale entre l'ombre et la forme.

Guide de référence HTML canvas

HTML: <template> balise