본문 바로가기
Javascript

p5.js에서 drop shadow 효과 넣기

by progrpsk 2017. 9. 21.

최근 p5.js로 코딩하다가 ellipse에 drop shadow를 넣을 일이 생겼다.

하지만 p5.js의 reference를 찾아보아도 drop shadow을 넣을수 있는 함수는 보이지 않았다.

구글링하여 찾은 결과 p5.js는 유일하게 drop shadow를 넣을수 있는 함수를 지원을 안한다고 한다.


이에 관한 내용 첨부는 아래의 링크를 참고하면 된다.


https://github.com/processing/p5.js/wiki/p5.js-overview#createcanvas


대신 캔버스의 함수를 그대로 사용할 경우 drop shadow가 되게끔 지원해주고 있다.


결론적으로 아래와 같이 써주었더니 효과가 잘 적용되었다.


drawingContext.shadowOffsetX = 5;

drawingContext.shadowOffsetY = -5;

drawingContext.shadowBlur = 10;

drawingContext.shadowColor = "black";


댓글