HTML canvas shadowOffsetX property
Examples
Draw a rectangle with an offset to the right 20 pixel shading (from left position of the rectangle):
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);
var ctx=c.getContext("2d");
ctx.shadowBlur=10;
ctx.shadowOffsetX=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 shadowOffsetX property.
Note: 8 and earlier versions of Internet Explorer do not support the <canvas> element.
Definition and Usage
shadowOffsetX property sets or returns the shape of the shadow and the horizontal distance.
shadowOffsetX = 0 indicates just below the shadow located shape.
shadowOffsetX = 20 indicates the shape of the shadow on the right left position 20 pixels.
shadowOffsetX = -20 indicating the shape of the shadow of the 20-pixel left position on the left.
Tip: To adjust the vertical distance from the shadows and shapes, use shadowOffsetY property.
| Defaults: | 0 |
|---|---|
| JavaScript syntax: | context.shadowOffsetX = number; |
Property Value
| 值 | 描述 |
|---|---|
| number | 正值或负值，定义阴影与形状的水平距离。 |
HTML canvas Reference Manual