Front-end_dev
프로젝트하면서 정말 너무어려웠던 부분은 동영상에서 볼 수 있다시피 사용자의 막대기가 맨위,맨아래에 부딪혔을 때, 벗꽃 비슷한 애니메이션이 나타나는데 이걸 구현하는게 제일 힘들었습니다. * 가장 어려웠던 부분.-> 일반적인 애니메이션 루프의 로직은 전체지우기->전체그리기 이다. 좀 더 구체적으로 말하자면 전체지우기->일부분그리기->일부분그리기->일부분그리기->일부분그리기->결국전체를 그리게 된다. 이러한 과정을 계속해서 반복하게 된다. 근데 여기에 문제점이 한가지 있다.예를들어, 사용자의 입력에 따라 애니메이션 루프를 계속 호출한다고 가정해보자.처음에 호출할땐 문제 없다. 하지만 2번째 호출을 하게 되면 화면에는 아무것도 나타나지 않을 것이다.왜냐하면 비동기로 호출되는 window.requestAnimat..
소스코드 : https://github.com/hyunsooda/PingPong 반디캠으로 찍어서그런지 랜더링이 느리게되는것처럼 보이는감이있어보이네요??;;
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); /*이 예제는 동그라미를 마치 형광등으로 비추고있는듯한 효과를 보여줍니다.이러한 효과를 내려면 대표적으로 createRadia..