728x90
안녕하세요
오늘은 자바스크립트로 무지개 효과를 만들어 보겠습니다.
*결과
1. getContext
이 함수는 어떤 도형을 그리고 싶을 때 사용됩니다. 예제에서는 2d 타입의 인자를 받아옵니다.
var c = document.getElementById("c");
var ctx = c.getContext("2d");2. stroke
이 함수를 사용하면 실질적으로 화면에 그림이 그려집니다.
function drawParticle(o){
ctx.fillStyle = "hsla("+o.a+", 90%,60%,"+o.alpha+")";
ctx.strokeStyle = "hsla("+o.a+", 100%,50%,"+o.alpha+")";
ctx.beginPath();
ctx.arc(o.x,o.y, o.r,0,2*Math.PI);
ctx.fill();
ctx.stroke();
}
3. hsla 모델
이 hsla 모델은 색상을 아래와 같이 정의합니다.
hsla(hue, saturation, lightness, alpha)
각각 색상, 채도, 명도, 투명도를 뜻합니다.
ctx.fillStyle = "hsla("+o.a+", 90%,60%,"+o.alpha+")";
ctx.strokeStyle = "hsla("+o.a+", 100%,50%,"+o.alpha+")";ㅍ
[매개변수]
[hue]
색상 (= 색조 = 색깔)
※ 0 ~ 360 (숫자만 기재)
※ 0 (= 360)은 빨간색, 120은 녹색, 240은 파란색
[saturation]
채도 (= 컬러 정도)
※ 0 ~ 100 % (% 단위 필수 기재)
※ 0%는 음영, 100%는 컬러 최대치
[lightness]
명도 (= 밝기)
※ 0 ~ 100 % (% 단위 필수 기재)
※ 0 %는 검은색이고, 50 %는 보통이며 100 %는 흰색
[alpha]
불투명도
※ 0.0 ~ 1.0 (숫자만 기재)
※ 0.0은 완전 투명, 1.0은 완전 불투명
4. 전체코드
<!doctype html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>무지개 효과</title>
<style rel="stylesheet">
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
#c {
display: block;
margin: 0 auto;
margin: calc(50vh - 250px) auto;
}
</style>
</head>
<body>
<canvas id='c'></canvas>
<script type="text/javascript">
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 500,cx=cw/2;
var ch = c.height = 500,cy=ch/2;
var rad = Math.PI / 180;
var frames = 360;
var r= 150;// trail radius
var p = [];// particles array
ctx.lineWidth = 2;
function Particle(a) {
this.a = a;
this.rnd = rnd()
this.r = 2;
this.R = r;
this.x = cx + this.R * Math.cos(this.a * rad);
this.y = cy + this.R * Math.sin(this.a * rad);
this.alpha = 1;
}
for (var a = 0; a < 360; a+=1.5) {
var particle = new Particle(a);
p.push(particle);
}
function drawParticle(o){
ctx.fillStyle = "hsla("+o.a+", 90%,60%,"+o.alpha+")";
ctx.strokeStyle = "hsla("+o.a+", 100%,50%,"+o.alpha+")";
ctx.beginPath();
ctx.arc(o.x,o.y, o.r,0,2*Math.PI);
ctx.fill();
ctx.stroke();
}
function Draw() {
frames+=.5;
ctx.clearRect(0, 0, cw, ch);
var n = p.length;
for( var i = 0; i < n; i++){
var o = p[(~~frames-i) % n];
o.r = 2 + i/9;
o.R = r+ i/2 * o.rnd;
o.x = cx + o.R * Math.cos(o.a * rad);
o.y = cy + o.R * Math.sin(o.a * rad);
var l = ~~(3*n/4);
o.alpha = (l - i)/l;
drawParticle(o);
}
window.requestAnimationFrame(Draw);
}
window.requestAnimationFrame(Draw);
function rnd() {// a @tmrDevelops function
Math.random = (Math.random * 108013 + 2531011) & 0xffffffff;
return Math.abs(Math.random >> 16) / 32869;
}
function randomIntFromInterval(mn, mx) {
return ~~(rnd() * (mx - mn + 1) + mn);
}
</script>
</body>
</html>'JavaScript' 카테고리의 다른 글
| [Javascript] 버튼클릭으로 팝업창 만들기 (0) | 2022.06.08 |
|---|---|
| [Javascript] 스크롤에 따른 웹페이지 배경색 변경하기 (0) | 2022.05.27 |
| [Javascript] 공기방울 효과 만들기 (0) | 2022.05.02 |
| [Javascript] 알림창 종류알아보기 (Alert , Confirm, Prompt) (0) | 2022.04.30 |
| [Javascript] Kakao 지도 Javascript API 를 사용해서 지도 표시 및 마커 찍기 (2) | 2022.04.29 |
