HTML 캔버스 shadowOffsetX 속성
예
(사각형의 왼쪽에 위치)에서 오른쪽으로 20 픽셀 쉐이딩에 오프셋으로 사각형을 그립니다 :
자바 스크립트 :
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);
»시도
브라우저 지원
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬과 사파리 지원 shadowOffsetX 속성입니다.
참고 : 인터넷 익스플로러 8 이전 버전의 <캔버스> 요소를 지원하지 않습니다.
정의 및 사용
shadowOffsetX는 속성 집합 또는 그림자와 수평 거리의 형태를 돌려줍니다.
shadowOffsetX = 0은 (는) 그림자있는 모양 아래에 나타냅니다.
shadowOffsetX = (20)는 오른쪽에서 왼쪽으로 위치를 20 픽셀의 그림자의 모양을 나타냅니다.
shadowOffsetX = -20 좌측 20 화소 좌측 위치의 그림자의 형상을 나타낸다.
팁 : 그림자와 모양의 수직 거리를 조정 사용 shadowOffsetY의 속성을.
| 기본값 : | 0 |
|---|---|
| 자바 스크립트 구문 : | 상황에 맞는.shadowOffsetX = 번호; |
속성 값
| 值 | 描述 |
|---|---|
| number | 正值或负值，定义阴影与形状的水平距离。 |
HTML 캔버스 참조 설명서