HTML reference manual

HTML tag大全

HTML: <template> etichetta

HTML canvas shadowOffsetX attribute

shadowOffsetX is an attribute of the Canvas 2D API that describes the horizontal offset distance of the shadow.

Manuale di riferimento per HTML canvas

Online Example

Draw a rectangle with a shadow starting 20 pixels to the right (from the left side of this blue rectangle):

Demonstration of the usage of the HTML canvas shadowOffsetX attribute:

Example

<!DOCTYPE html>
<html>
<head>
<title>Usage of HTML canvas shadowOffsetX 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.shadowOffsetX=20;
ctx.shadowColor="black";
ctx.fillStyle="blue";
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 shadowOffsetX.

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

Definizione e uso

L'attributo shadowOffsetX imposta o restituisce la distanza orizzontale tra l'ombra e la forma.
shadowOffsetX = 0 indica che l'ombra è esattamente dietro la forma.
shadowOffsetX = 20 indica che l'ombra inizia 20 pixel a destra della posizione sinistra della forma.
shadowOffsetX = -20 indica che l'ombra inizia 20 pixel a sinistra della posizione sinistra della forma.

Suggerimento:Per regolare la distanza verticale dell'ombra rispetto alla forma, utilizzare shadowOffsetY Attributo.

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

Valore dell'attributo

Valore	Descrizione
number	Valore positivo o negativo, definisce la distanza orizzontale dell'ombra rispetto alla forma.

Manuale di riferimento per HTML canvas

HTML: <template> etichetta