HTML 参考手册

HTML 标签大全

HTML: <template> balise

HTML canvas shadowOffsetY 属性

shadowOffsetY 是 Canvas 2D API 描述阴影垂直偏移距离的属性。

Guide de référence pour HTML canvas

在线示例

绘制一个阴影在矩形顶部下方20个像素处的矩形：

shadowOffsetY 属性的使用：

示例

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas shadowOffsetY 属性的使用(基础教程网 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持　HTML5　canvas 标签。
</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>

Voyons si... ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

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

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

Définition et utilisation

L'attribut shadowOffsetY définit ou retourne la distance verticale entre l'ombre et la forme.
shadowOffsety = 0 signifie que l'ombre est exactement derrière la forme.
shadowOffsetY = 20 signifie que l'ombre commence en dessous de la position supérieure de la forme20 pixels.
shadowOffsetY =-20 signifie que l'ombre commence au-dessus de la position supérieure de la forme20 pixels.

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

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

Valeur de l'attribut

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

Guide de référence pour HTML canvas

HTML: <template> balise