캔버스에 그림자를 설정하는 방법은 무엇입니까? 캔버스에 그림자를 설정하는 방법-H5 튜토리얼-php.cn

캔버스에 그림자를 설정하는 방법은 무엇입니까? 캔버스에 그림자를 설정하는 방법

不言

풀어 주다： 2018-09-17 13:43:29

원래의

5286명이 탐색했습니다.

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 = $$(&#39;can&#39;);
        var cans = can.getContext(&#39;2d&#39;);
        cans.fillStyle = &#39;green&#39;;
        cans.shadowOffsetX = 5;
        cans.shadowOffsetY = 5;
        cans.shadowColor = &#39;#333&#39;;
        cans.shadowBlur = 10;
        cans.fillRect(200,300,400,200);
    }
 </script>
<body onload="pageLoad();">
    <canvas id="can" width="800px" height="600px"></canvas>
</body>
</html>

로그인 후 복사

Canvas는 그림자 효과를 다음과 같이 설정합니다.

캔버스에 그림자를 설정하는 방법은 무엇입니까? 캔버스에 그림자를 설정하는 방법