캔버스에 그림자를 설정하는 방법은 무엇입니까? 캔버스에 그림자를 설정하는 방법
- 不言원래의
- 2018-09-17 13:43:295260검색
CSS를 사용하여 그림자 효과를 얻을 수 있다는 것을 알고 있지만 HTML5의 캔버스를 사용하여 그림자 효과를 설정할 수도 있습니다. 따라서 다음 기사에서는 더 이상 고민하지 않고 캔버스를 사용하여 그림자 효과를 설정하는 방법을 소개하겠습니다. 바로 내용 들어갑니다.
먼저 캔버스에 그릴 때 텍스트, 그래픽, 이미지, 획, 채우기 등 컨텍스트 개체의 관련 속성을 설정하여 그림자를 설정할 수 있다는 점을 알아야 합니다.
Canvas는 그림자 효과를 생성하려면 다음 네 가지 속성을 사용해야 합니다.
shadowColor: 그림자의 색상이며 기본값은 완전히 투명한 검정색입니다. 따라서 이 속성을 불투명으로 설정하지 않으면 그림자가 보이지 않습니다. 이 속성은 색상을 나타내는 문자열로만 설정할 수 있으며 그라데이션이나 패턴은 사용할 수 없습니다. 반투명 그림자를 사용하면 그림자를 통해 배경이 보이기 때문에 매우 사실적인 그림자 효과를 얻을 수 있습니다.
shadowOffsetX: X축의 그림자 오프셋(픽셀 단위)입니다. 기본값은 0이며, 그림자가 모양 바로 아래에 배치되어 보이지 않습니다. 0보다 크면 오른쪽으로 이동하고, 0보다 작으면 왼쪽으로 이동합니다. 그림자 오프셋이 클수록 생성되는 그림자도 커지고, 그려진 그래픽이 캔버스에 더 높게 나타납니다.
shadowOffsetY: Y축의 그림자 오프셋(픽셀 단위)입니다. 기본값은 0이며, 그림자가 모양 바로 아래에 배치되어 보이지 않습니다. 0보다 크면 아래로 이동하고, 0보다 작으면 위로 이동합니다. 그림자 오프셋이 클수록 생성되는 그림자도 커지고, 그려진 그래픽이 캔버스에 더 높게 나타납니다.
shadowBlur: 그림자의 흐림 값입니다. 그림자를 흐리게 하기 위해 가우시안 흐림 방정식에 사용되는 픽셀 독립적인 값입니다. 기본값은 0이며 선명한 그림자를 생성합니다. 값이 클수록 그림자가 더 흐릿해집니다.
참고: 캔버스 사양에 따라 브라우저는 다음 두 가지 조건이 충족되는 경우에만 그림자를 그립니다.
1. 완전히 투명하지 않은 ShadowColor 속성 값이 지정됩니다.
2. 세 가지 속성 중 하나 이상의 속성이 0이 아닌 값을 갖습니다.
캔버스로 구현된 그림자 효과의 예제 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
</head>
<style type="text/css">
body{margin:20px auto; padding:0; width:800px; }
canvas{border:dashed 2px #CCC}
</style>
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
function pageLoad(){
var can = $$('can');
var cans = can.getContext('2d');
cans.fillStyle = 'green';
cans.shadowOffsetX = 5;
cans.shadowOffsetY = 5;
cans.shadowColor = '#333';
cans.shadowBlur = 10;
cans.fillRect(200,300,400,200);
}
</script>
<body onload="pageLoad();">
<canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>Canvas는 그림자 효과를 다음과 같이 설정합니다.
이 글은 여기서 끝납니다. 캔버스 요소에 대한 자세한 사용법은 여기에서 확인하세요. html5 개발 매뉴얼을 참조하세요.
위 내용은 캔버스에 그림자를 설정하는 방법은 무엇입니까? 캔버스에 그림자를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!