CSS_ 선형 그래디언트

KH/JavaScript

CSS_ 선형 그래디언트

오늘의 진 2022. 9. 28. 15:00

그라데이션

그래디언트 : 둘 이상의 색 사이의 색상 표현을 부드럽게 전환해주는 효과를 의미 (그라데이션)

CSS3에서 제공하는 그래디언트

선형 그래디언트(linear gradients)
원형 그래디언트(radial gradients)

선형 그래디언트

(선형 그래디언트를 만들기 위해서는 최소한 두개 이상의 색상 지정점이 필요)

[선형 그라데이션]
//방법1
createLinearGradient(시작점 x1,y1 , 끝점x2,y2);  >> 선형 그라데이션 지정 
//방법2
background : linear-gradient(진행방향, 색상 지정점1, 색지정점2, ...);
(예)background:linear-gradient(green, yellow);

[원형 그라데이션]
createRadialGradient(x1,y1,첫번째 원의 반지름r1,x2,y2, 두번째 원의 반지름r2 );
>> 원형 그라데이션 지정 

addColorstop(오프셋, 색상); 
>> 그라데이션 경계색 지정
>>오프셋 : 0.0-1.0까지 색의 상대적인 위치
addColorStop() 메소드는 그라데이션 객체의 색상과 위치를 지정한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MY Gradient</title>
</head>
<body>

    <canvas id="myCanvas" width="280" height="90" style="border: 1px dotted #000;"></canvas>
    <script>
        var c=document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        
        // createLinearGradient(x1,y1,x2,y2)
        // 인자 : x1,y1 : 그라디언트를 적용할 면의 시작 축좌표 
        // 인자 : x2,y2 : 그라디언트를 적용할 면의 종료 축 좌표 

        var grd = ctx.createLinearGradient(0,0,250,0);
        //전체를 1로 본다. 
        grd.addColorStop(0,"red"); //0-0.5까지 red
        grd.addColorStop("0.5","green"); //0.5-0.8 green
        grd.addColorStop("0.8","magenta"); // 0.8-1 magenta
        grd.addColorStop(1,"black");
        ctx.fillStyle = grd;
        ctx.font = "25px Arial";
        ctx.fillText("Hava a nice day today",10,50)

        

    </script>


</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

    <canvas id="myCanvas1" width="200" height="100"></canvas>
    <canvas id="myCanvas2" width="200" height="100"></canvas>
    <canvas id="myCanvas3" width="200" height="100"></canvas>

    <script>
        var c = document.getElementById("myCanvas1");
        var ctx = c.getContext("2d");

        //create gradient
        var grd = ctx.createLinearGradient(0,0,160,0);
        grd.addColorStop(0,"blue");
        grd.addColorStop(0.5,"cyan");
        grd.addColorStop(1,"white");

        //Fill with gradient
        ctx.fillStyle=grd;
        ctx.fillRect(10,10,150,80);

        //--------------------------------
        var c = document.getElementById("myCanvas2");
        var ctx = c.getContext("2d");

        //create gradient
        var grd = ctx.createRadialGradient(75,30,5,75,30,100);
        grd.addColorStop(0,"red");
        grd.addColorStop(0.5,"green");
        grd.addColorStop(1,"white");

        //fill with gradient
        ctx.fillStyle=grd;
        ctx.fillRect(10,10,150,80);

        //-------------------------------------------
        var c = document.getElementById("myCanvas3");
        var ctx = c.getContext("2d");

        var grd = ctx.createLinearGradient(170,0,0,80);
        grd.addColorStop(0,"black");
        grd.addColorStop("0.3","magenta");
        grd.addColorStop("0.5","blue");
        grd.addColorStop("0.8","yellow");
        grd.addColorStop(1,"red");

        ctx.fillStyle = grd;
        ctx.fillRect(10,10,150,80);
    </script>

</body>
</html>