HTML canvas shadowOffsetY property
Examples
Draw a rectangle with a shadow offset down 20 pixels (from the top position of the rectangle):
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);
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
try it"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome and Safari support shadowOffsetY property.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
shadowOffsetY property sets or returns the vertical distance of the shadow shape.
shadowOffsety = 0 indicates just below the shadow located shape.
shadowOffsetY = 20 indicates the shape of the shadow is located at 20 pixels below the top position.
shadowOffsetY = -20 indicating the shape of the shadow of the 20-pixel top positions above.
Tip: To adjust the shape of the shadow and the horizontal distance, use shadowOffsetX property.
Defaults: | 0 |
---|---|
JavaScript syntax: | context.shadowOffsetY = number; |
Property Value
值 | 描述 |
---|---|
number | 正值或负值,定义阴影与形状的垂直距离。 |
HTML canvas Reference Manual