Canvas에서 형광등효과 내보기.

let ctx = document.querySelector('canvas').getContext('2d');

let grd = ctx.createRadialGradient(500,500,10,500,500,30);

grd.addColorStop(0,'#ffffcc');

grd.addColorStop(0.1,'#ffffb3');

grd.addColorStop(0.2,'#ffff99');

grd.addColorStop(0.3,'#ffff66');

grd.addColorStop(1,'black');

ctx.fillStyle = grd;

ctx.fillRect(100,100,1000,700);

/*

이 예제는 동그라미를 마치 형광등으로 비추고있는듯한 효과를 보여줍니다.

이러한 효과를 내려면 대표적으로 createRadialGradient 함수를 써서 표현 할 수 있습니다.

이 예제의 핵심은, 밝기가 낮은 색 부터 시작해서 갈 수록 높은색을 정해주는데, addColorStop에서 0.5이상을 넘어서 값을주면 이쁘게 나오지 않는다는것입니다...

그래서 본 예제에서는 0.3까지만 했습니다.

아 , 그리고 또 중요한게 있는데, addColorStop에서 1일때 black값을 준 이유는 이 효과를 좀 더 구체적으로 보여주기 위함입니다. 다른색으로 한 번 바꿔보십쇼. 아마 black일때처럼만큼은 이뻐보이지 않을 것 입니다.

*/