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);
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| shadowOffsetX | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
shadowOffsetX 속성은 모양에서 그림자의 수평 거리를 설정하거나 반환합니다.
shadowOffsetX=0은 그림자가 모양 바로 뒤에 있음을 나타냅니다.
shadowOffsetX=20은 그림자가 모양의 왼쪽 위치에서 오른쪽으로 20픽셀 시작함을 나타냅니다.
shadowOffsetX=-20은 그림자가 왼쪽으로 20픽셀(모양의 왼쪽 위치에서) 시작함을 나타냅니다.
팁: 모양에서 그림자의 수직 거리를 조정하려면 shadowOffsetY 속성을 사용하십시오.
| 기본값: | 0 |
|---|---|
| 자바스크립트 구문: | 컨텍스트 .shadowOffsetX= 숫자 ; |
속성 값
| Value | Description | Play it |
|---|---|---|
| number | A positive or negative number that defines the horizontal distance of the shadow from the shape |
❮ HTML 캔버스 참조